具有固定大小的父div内的3个动态div

时间:2016-02-08 20:12:50

标签: html css

我在这里遇到了一些麻烦,我试图在固定宽度的父div内创建三个宽度不一的div。反正有没有div根据那里的空间调整自己?基本上所有三个div都有不同的大小,需要填充父div。 div也需要在同一条线上。高度不是问题。

这样的事情:

<div id="parent">
  <div></div>
  <div></div>
  <div></div>
</div>

4 个答案:

答案 0 :(得分:3)

Flexbox救援!

对于这个例子,我使用了justify-content: space-between,但是有很多不同的选项。

Wonderful overview of flexbox

&#13;
&#13;
#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;
&#13;
&#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>