Question

这应该很简单，但我无法弄清楚。下面是我的代码示例。我希望每个框中的前两个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>

Answer 1

我认为如果不至少改变一下html就不可能。

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

或2.更改为使用行的两个div，并在每个行中使用四个框，并在顶行和底行中使用相应的div。您不必担心这种方法的绝对定位，它将是一个更清洁。

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

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

2 个答案: