css - DIV 像表格一样对齐

Question

我在对齐 DIV 标签时遇到问题。我正在使用 Lightbox 制作一个非常基本的页面。在过去，我只会制作一张表格，将每个单元格垂直对齐到底部，然后继续。但是尝试使用 DIV 标签时，遇到了一些麻烦。当我执行下面的代码时，它非常困惑。 2 个较短的 DIV 容器可以对齐在一个“行”上。有人可以指出实现此目标的最佳方法吗？

HTML代码

<div id='wrapper' style='width:924px;>
    <div style='float:left;width:308px;background-color:green'>
        <a href='' title='title' rel='lightbox[10]' title=''>
            <img src='' width='250px'>
        </a>
        <br/>
        TITLE
    </div>
    <div style='float:left;width:308px;background-color:green'>
        <a href='' title='title' rel='lightbox[10]' title=''>
            <img src='' width='250px'>
        </a>
        <br/>
        TITLE
    </div>
    <div style='float:left;width:308px;background-color:green'>
        <a href='' title='title' rel='lightbox[10]' title=''>
            <img src='' width='250px'>
        </a>
        <br/>
        TITLE
    </div>
    ...
</div>

谢谢!

Answer 1

See this fiddle.使用类而不是内联样式。我在这里使用 inline-block 而不是 float。结果是 div 在底部而不是顶部对齐。但要注意代码中的空格。看看我是如何把你的 div 拼在一起的。如果有空白，则 33% 的宽度太大，会把第三个 div 排到一行。33% 的宽度是容器的三分之一，因此它们各自占用相同的宽度。