Question

鉴于任意尺寸的最外面的“包含” div，我正在寻找将在其中放置两个div并按从左到右显示它们的标记和css，如下所示。左侧的第一个div应该具有200像素的固定宽度。它应该占据其父代高度的100％。右边的第二个div应该占据父对象的剩余宽度以及其高度的100％。

因此，为父容器和两个子容器提供以下HTML：

<div class="a">
  <div class="b">

  </div>
  <div class="c">

  </div>
</div>

并为父母提供以下CSS：

.a {
  height: 300px;
  width: 600px;
  background-color: gray;
}

鉴于孩子们的CSS不完整：

.b {
  background-color: red; 
}
.c {
 background-color: green;
}

如何以不依赖于父代的确切高度和宽度的方式为子代完成CSS？

（也可以添加另一个元素“ .d”作为两个子元素的父元素，例如作为flex容器，并提供以下HTML：

<div class="a">
  <div class="d">
    <div class="b">

    </div>
    <div class="c">

    </div>
  </div>
</div>

要点是，我不能修改最外面的元素，但可以通过元素和其下的CSS的任何组合来实现自己的目标。

）

Answer 1

display: flex是为此类型的设置而设计的。

我个人最喜欢的帖子是CSS-Tricks': "A complete guide to Flexbox"。

.a {
  display: flex; /* turn element into a flex container, and all its children into flex elements */
  flex-direction: row; /* render the flexbox horizontally */
  height: 300px;
  width: 600px;
  background-color: gray;
}

.b {
  width: 200px; /* Element will be exactly 200px wide */
  background-color: red;
}

.c {
  flex-grow: 1; /* This (flex) element will take all available space */
  background-color: green;
}

<div class="a">
  <div class="b">

  </div>
  <div class="c">

  </div>
</div>

Answer 2

这就是我的方法：相对定位。

.b {
      background-color: red; 
     position: relative;
     left: 0px;
     top: 0px;
     width: 100px;
     height: 300px;


}
.c {
     background-color: green; 
     position: relative;
     left: 100px;
     top: -300px;
     height: 300px;

}

基本上，相对定位会将盒子相对于正常放置位置移动。

如何创建两个孩子来填补父母的身高？

2 个答案: