鉴于任意尺寸的最外面的“包含” 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的任何组合来实现自己的目标。
)
答案 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;
}
基本上,相对定位会将盒子相对于正常放置位置移动。