同样分布在一个div内的3个div - 没有浮动

我一直在广泛阅读这方面的内容，但一直没有能够解决它到我满意。同样分布在一个div内的3个div - 没有浮动

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

我不想使用浮动，因为背景色会消失。

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

这是JSBIN上的代码。

谢谢！

来源

2016-02-13 johann_ka

裹的div和弯曲的包装。 –

可能重复[如何对齐3个div（左/中/右）在另一个div？]（http://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right -inside-another-div） –

谢谢Michael_B，我那篇文章有链接http://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another- div/32122011＃32122011它解释了如何做到这一点，为什么'flex'是最有效的解决方案。 –

您可以在容器上使用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>

来源

2016-02-13 23:49:33

同样分布在一个div内的3个div - 没有浮动

回答

相关问题