Question

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

这样的事情：

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

Answer 1

Flexbox救援！

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

Wonderful overview of flexbox

＆＃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;

Answer 2

有几种方法可以做到这一点。最简单的可能是：

#parent {
    display: table-row;
}
#parent div {
    display: table-cell;
}

这将使元素的行为类似于HTML表。（你也可以使用一个表来简化事情。）

Answer 3

您可以使用一些CSS规则来实现您描述的行为。这是一个小提琴：https://jsfiddle.net/sfmj4ca8/1/

max-width: 33%;确保3个div最多占用99％的宽度
display: inline-block;使div显示为内联。

Answer 4

怎么样才能这样做。

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>

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

4 个答案: