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

时间:2018-07-16 19:58:32

标签: css

鉴于任意尺寸的最外面的“包含” 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的任何组合来实现自己的目标。

2 个答案:

答案 0 :(得分:2)

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>

答案 1 :(得分:0)

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

.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;

}

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