Question

是否可以使垂直浮子与水平浮子类似？在下面的Html中，我希望绿色按钮保持原样，黄色浮动到底部，超出灰色边缘。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <table style="margin: 250px; width:50px; height: 100px; background-color: #ccc; table-layout: fixed;">
        <tr>
            <td style="vertical-align:top;">
                <div style="margin-top:-20px; width:50px; height: 40px; background-color: Green;">Top</div>
                <div style="margin-bottom:-20px; width:50px; height: 40px; background-color: Yellow;">Bottom</div>
            </td>
        </tr>
    </table>
</body>
</html>

更新1 - 这里更接近我想要实现的领域图片。我正在寻找一个垂直的统一面板，即它的孩子之间的距离应该是相同的。我设法用水平布局来做，但坚持垂直实现。

HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <table style="margin: 250px; width:70px; height: 400px; background-color: #ccc; table-layout: fixed;">
        <tr>
            <td style="vertical-align: middle; background-color: Gray; padding: 5px;">
               <!-- <div style="margin-top:-20px; width:50px; height: 40px; background-color: Green;">1</div>-->
                  <div style="margin: -20px auto auto auto; width:50px; height: 40px; background-color: white;">Top!!!</div>

                <div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">2</div>
            </td>
        </tr>
         <tr>
            <td style="vertical-align: middle; background-color: Gray; padding: 5px;">
                <div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">3</div>
            </td>
        </tr>
        <tr>
            <td style="vertical-align: middle; background-color: Gray; padding: 5px;">
                <div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">4</div>
            </td>
        </tr>
        <tr>
            <td style="vertical-align: middle; background-color: Gray; padding: 5px;">
                <div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">5</div>
            </td>
        </tr>
    </table>

</body>
</html>

Answer 1

使用相对位置并将底部设置为框高度的负数

http://jsfiddle.net/e9uet/

Answer 2

如果他们并不总是必须自上而下自上而下的顺序你是否尝试过简单的内联块？这应该允许它们水平填充，然后在没有足够空间时垂直包裹。

.columns .icon { display: inline-block; width: 80px; height: 80px; background-color: lightblue; margin: 10px }

http://jsfiddle.net/JT3La/

CSS垂直浮动技术

2 个答案: