Question

我不确定CSS规则和HTML元素的最佳组合是什么来实现这种布局：

example layout

（对于图像道歉，这是我能想到的最好的方式来表达我的想法）

它本质上是一个包含2行和4列的表格，但我不想使用表格。

我相当自信我可以一起破解一些可以做到这一点的东西，但它不会优雅或最优，我想知道最干净的方式。

如果不清楚，请告诉我。感谢

Answer 1

你是说这样的意思吗？ http://jsfiddle.net/semencov/P8B4R/

Answer 2

根据您的目标受众群体，请考虑使用1200px.com。

如果您已有模板，我就是jsFiddle。你可以从那里开始:)

http://jsfiddle.net/aLXby/6/

Answer 3

对于简单布局，请将所有容器（“列”）向左浮动，并确保clearfix这些列的父容器：

<section class="clearfix">
    <figure>
        <img src="img1.jpg">
        <figcaption>Text here</figcaption>
    </figure>
    <figure>
        <img src="img2.jpg">
        <figcaption>Text here</figcaption>
    </figure>
    <figure>
        <img src="img3.jpg">
        <figcaption>Text here</figcaption>
    </figure>
    <figure>
        <img src="img4.jpg">
        <figcaption>Text here</figcaption>
    </figure>
</section>

您的CSS可能是：

(clearfix as described on linked page)

figure {
    float: left;
}

要获得更多控制和结构，请尝试使用网格系统，例如960.gs。

此示例假设您的图片有字幕，HTML5 figure tag and figcaption tags非常适合此目的。

Answer 4

最重要的是保持HTML语义。所以没有“最适合这种布局的HTML”，而是最适合该内容的HTML。在这种情况下，这是马特所建议的（figure和figcaption）。我可能会使用列表（ul和li）而不是段。

关于样式，有很多方法可以实现这种布局。根据您的具体需求（图像高度相等？宽度相同？字幕怎么样？一行？几行？等）您可以使用浮点数获得，您也可以使用display: inline-block如果您真的想要复制一个表格，你可以使用display: table/table-row/table-cell。

编辑：我认为使用网格系统就像使用MVC框架来显示动画gif一样。我见过的所有网格系统都要求用户添加相当多的div和类来破坏你的标记。

CSS布局最佳实践

4 个答案: