CSS 垂直浮动技术答案

【问题标题】：CSS Vertical Float TechniqueCSS 垂直浮动技术
【发布时间】：2014-02-25 03:59:33
【问题描述】：

是否可以让垂直浮动类似于水平浮动？在下面的 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>

【问题讨论】：

标签： html css css-float vertical-alignment

【解决方案1】：

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

http://jsfiddle.net/e9uet/

【讨论】：

如果您发现答案对您有帮助，请点赞并勾选问题旁边的内容。
@wizztjh 非常好！无论如何我都会标记为答案，但你能看看更新的问题吗？
@V413HAV ，是的。我懒得将样式与css分开。他的意思是，把css放在styl=""不是一个好主意，应该把它放在css和
@user1514042 ，尝试在jsfiddle.net/e9uet 中清理它，通过将样式移动到 css ，编辑后我很难看 html
一个有用的事情是让box-sizing: border-box 设置元素的高度，类似于让width: auto 元素的宽度填充其余宽度。

【解决方案2】：

如果它们不必总是以自上而下的倒数第一顺序排列，您是否尝试过简单的内联块？这应该允许它们水平填充，然后在空间不足时垂直包装。

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

http://jsfiddle.net/JT3La/

【讨论】：