html - 我想设计一个容器，它可以容纳 3 个内联的 div，其中包含父属性

Question

在我的容器中，我放置了border-radius，但是每当我在容器内对齐3个div时，border-radius就会丢失。Container分为3部分，但它占据了容器的整个高度，并且我给出的border-radius丢失了在孩子之下。实际上，我希望孩子的左侧和右侧的孩子将半径上下。
HTML 代码：

.container {
  width: 500px;
  height: 200px;
  border-radius: 7px;
  background: black;
  margin: 50px auto;
  display: inline-block;
}

.child1 {
  background: white;
  height: 100%;
  width: 33.3%;
  float: left;
}

.child2 {
  background: red;
  height: 100%;
  width: 33.3%;
  float: left;
}

.child3 {
  background: blue;
  height: 100%;
  width: 33.3%;
  float: left;
}

<div class="container">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
  <div class="child3">
  </div>
</div>

标签： htmlcss

Answer 1

添加overflow: hidden到容器中。

.container {
  width: 500px;
  height: 200px;
  border-radius: 7px;
  overflow: hidden; /* this will enforce the appearance of border-radius */
  background: black;
  margin: 50px auto;
  display: inline-block;
}

.child1 {
  background: green;
  height: 100%;
  width: 33.3%;
  float: left;
}

.child2 {
  background: red;
  height: 100%;
  width: 33.3%;
  float: left;
}

.child3 {
  background: blue;
  height: 100%;
  width: 33.3%;
  float: left;
}

<div class="container">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
  <div class="child3">
  </div>
</div>