css - 如何在 CSS3 和 HTML5 中布局 2 x 3 div（包含图像和文本）的网格

Question

我在文章内容框中有 6 个 div。

包含的 6 个 div 将被分成每行 2 个 div

我希望这些 div 紧紧地适应水平空间

这意味着第一个 div 应该从最左边开始，第二个应该在最右边紧。

布置这样的网格布局的最佳方法是什么

Answer 1

<ul class="container clearfix">
    <li>1st Div</li>
    <li>2nd Div</li>
    <li>3rd Div</li>
    <li>4th Div</li>
    <li>5th Div</li>
    <li>6th Div</li> 
</ul>

及其风格

.container > li
{
width:50%;
float:left;
}
.container > li:nth-child(odd)
{
float:right;

}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix
{
display: block;
}

Answer 2

尝试以下操作：

<article class="container" style="overflow:hidden">
    <div style="width:50%; float:left;">1st Div</div> <!-- alternate floating if your width is less than 50%. if it's 50% you can leave all float left -->
    <div style="width:50%; float:right;">2nd Div</div>
    <div style="width:50%; float:left;">3rd Div</div>
    <div style="width:50%; float:right;">4th Div</div>
    <div style="width:50%; float:left;">5th Div</div>
    <div style="width:50%; float:right;">6th Div</div> 
</article>