Question

我一直在广泛阅读这篇文章，但一直无法解决这个问题。

我有一个div（<section>），其中包含一个<p>和3个<div> s。我想在一行中平均分配3个div，以便第一个div的左边界位于文档的左边界（<body>），右边界的右边界位于右边界。文件。

我不想使用float，因为背景颜色会消失。

我尝试过flex，但是justify-content没有产生预期的结果。

以下是JSBIN上的代码。

谢谢！

Answer 1

您可以在容器上使用display: flex，并将三个div元素的宽度设置为占据其容器的三分之一（或尽可能接近）。容器必须具有设置宽度（像素或百分比）才能工作。

#container {
  display: flex;
  height: 600px;
  width: 600px;
  background-color: lightgreen;
}
#container div {
  border: 1px solid black;
  margin: 0 10px;
  width: 33.333333%;
}
#container div img {
  width: 100%;
}

<div id="container">
  <div id="content1">
    I'm some content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
    <img src="http://i.imgur.com/P8z2H80.jpg">
  </div>
  <div id="content2">
    I'm some more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
    <img src="http://i.imgur.com/NfnBZAI.jpg">
  </div>
  <div id="content3">
    I'm even more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
    <img src="http://i.imgur.com/W8M37N2.jpg">
  </div>
</div>

在div中同样分配3个div - 没有浮动

1 个答案: