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

Question

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

包含的 6 个 div 将每行拆分为 2 个 div

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

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

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

Answer 1

尝试以下操作:

<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>