如何在这些框中水平对齐这些 div？答案

【问题标题】：How can I horizontally align these divs in these boxes?如何在这些框中水平对齐这些 div？
【发布时间】：2013-11-17 11:21:19
【问题描述】：

这应该很简单，但我想不通。下面是我的代码示例。我希望每个框中的前两个 div 与顶部对齐，每个框中的底部两个 div 与底部对齐。基本上，顶部和底部在每一行中对齐。有时我在第二个 div 中有超长的内容。这是我的 jsfiddle http://jsfiddle.net/APJX8/2/

<table style="width:100%;">
    <tr>
        <td style="width: 25%;">
            <div class="box" style="height:200px;">
                <div>top</div>
                <div>this is an extra extra extra long line that wraps</div>
                <div>right above bottom</div>
                <div>bottom</div>
            </div>
        </td>
        <td style="width: 25%;">
            <div class="box" style="height:200px;">
                <div>top</div>
                <div>right underneath</div>
                <div>right above bottom</div>
                <div>bottom</div>
            </div>
        </td>
        <td style="width: 25%;">
            <div class="box" style="height:200px;">
                <div>top</div>
                <div>right underneath</div>
                <div>right above bottom</div>
                <div>bottom</div>
            </div>
        </td>
        <td style="width: 25%;">
            <div class="box" style="height:200px;">
                <div>top</div>
                <div>right underneath</div>
                <div>right above bottom</div>
                <div>bottom</div>
            </div>
        </td>
    </tr>
</table>

【问题讨论】：

页面上的所有 id 都应该是唯一的。阅读 CSS bottom 属性以及它如何与不同的 positions 一起工作。这应该让你开始。
为什么要使用表格？为什么不对行使用两个外部 div，然后在第一行显示顶部和右下方的 div，在底部显示另外两个 div？相当简单。
将 id 更改为类。对于这个练习并不重要，但你是对的。
有人为我设置了这个 html，我不想大修。只是想要一些快速的对齐更改。这不是真正的 html，其中包含图像和链接，但我想让它真正易于理解。

标签： html css

【解决方案1】：

我认为不改变 html 是不可能的。

据我所知，您有两种选择：1. 在前两个 div 周围添加另一个 div，在底部两个 div 周围添加另一个。将第二个设置为position: absolute; bottom: 0，将第一个设置为position: absolute; top: 0;。将.box 设置为position: relative;。绝对定位需要在 .box 上设置高度，以防止绝对 div 在文本太长时发生冲突。

或 2. 更改为对行使用两个 div，并在每个框中使用四个框，在顶行和底行中分别使用 div。您无需担心此方法的绝对定位，它会更清洁。

【讨论】：

感谢您的建议，我明白您在说什么。这就是我试图快速修复其他人的代码的情况，该代码应用了一堆样式，所以仅仅切换它并不容易。但我会努力的！
您也可以使用类似于 #2 的方法，通过添加第二个 tr 创建两行并将底部的两个 div 移动到第二个 tr 中。根据您的实际代码，这实际上可能更清洁/更容易。

【解决方案2】：

这可能会对您有所帮助，您可以更改样式格式以满足您的需要... :)

    <table style="width:100%;">
    <tr>
        <td style="width: 25%;">
                <div class="box" style="height:200px; vertical-align:top;">
                    <div style="float:left; width: 100%;">top</div>
                    <div style="float:left;  width: 100%;">this is an extra extra extra long line that wraps</div>
                </div>
                <div style="vertical-align:bottom;">
                    <div style="float:left;  width: 100%;">right above bottom</div>
                    <div style="float:left;  width: 100%;">bottom</div>
                </div>

        </td>
        <td style="width: 25%;">
                <div class="box" style="height:200px; vertical-align:top;">
                     <div>top</div>
                     <div>right underneath</div>
                </div>
                <div style="vertical-align:bottom;">
                    <div>right above bottom</div>
                    <div>bottom</div>
                </div>
        </td>
        <td style="width: 25%;">
            <div class="box" style="height:200px; vertical-align:top;">
                     <div>top</div>
                     <div>right underneath</div>
                </div>
                <div style="vertical-align:bottom;">
                    <div>right above bottom</div>
                    <div>bottom</div>
                </div>
        </td>
        <td style="width: 25%;">
            <div class="box" style="height:200px; vertical-align:top;">
                     <div>top</div>
                     <div>right underneath</div>
                </div>
                <div style="vertical-align:bottom;">
                    <div>right above bottom</div>
                    <div>bottom</div>
                </div>
        </td>
    </tr>
</table>

【讨论】：