Question

我在调整DIV标签方面遇到了麻烦。我正在使用Lightbox创建一个非常基本的页面。在过去，我只需要制作一张桌子，将每个单元格垂直对齐到底部，然后继续前进。但是试图使用DIV标签，遇到一些麻烦。当我执行下面的代码时，它非常混乱。 2个较短的DIV容器可以在一行＆＃34;行＆＃34;上对齐。有人能指出我实现这个目标的最佳途径吗？

HTML CODE

<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%的宽度是容器的三分之一，因此它们各自占据相同的宽度。

像表一样的DIV对齐

1 个答案: