我在这里遇到了一些麻烦,我试图在固定宽度的父div内创建三个宽度不一的div。反正有没有div根据那里的空间调整自己?基本上所有三个div都有不同的大小,需要填充父div。 div也需要在同一条线上。高度不是问题。
这样的事情:
<div id="parent">
<div></div>
<div></div>
<div></div>
</div>
答案 0 :(得分:3)
Flexbox救援!
对于这个例子,我使用了justify-content: space-between
,但是有很多不同的选项。
#parent {
width: 300px;
background-color: orange;
display: flex;
justify-content: space-between;
}
.grow {
flex-grow: 1;
background-color: yellow;
}
&#13;
<div id="parent">
<div>One</div>
<div class="grow">Two</div>
<div>Three</div>
</div>
&#13;
答案 1 :(得分:2)
有几种方法可以做到这一点。最简单的可能是:
#parent {
display: table-row;
}
#parent div {
display: table-cell;
}
这将使元素的行为类似于HTML表。 (你也可以使用一个表来简化事情。)
答案 2 :(得分:0)
您可以使用一些CSS规则来实现您描述的行为。这是一个小提琴:https://jsfiddle.net/sfmj4ca8/1/
max-width: 33%;
确保3个div最多占用99%的宽度display: inline-block;
使div显示为内联。 答案 3 :(得分:0)
怎么样才能这样做。
div#parent{
border: 1px solid gray;
width: 400px;
margin: 0 auto;
height: 200px;
padding: 0;
}
div#parent > div{
border: 1px solid gray;
width: 32%;
margin: 5px auto;
display: inline-block;
height: 150px;
}
<div id="parent">
<div></div>
<div></div>
<div></div>
</div>