CSS Vertical Float Technique

问题

Is it possible to have a vertical float working by analogy with the horizontal one? In the Html below I'd like the green button to be as it is and the yellow to float to the bottom beyond gray shape edge.

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

Update 1 - here's a bit closer to realm picture of what I'm trying to achieve. I'm looking for a vertical uniform panel, i.e. the distance between its children should be the same. I managed to do it with the horizontal layout, but got stuck to the vertical implementation.

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>

回答1:

using relative position and and set the bottom as the negative of the box height

http://jsfiddle.net/e9uet/

回答2:

If they don't always have to be in top-down 1st-to-last order did you try simple inline-blocks? That should allow them to fill out horizontally and then wrap vertically when not enough space.

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

http://jsfiddle.net/JT3La/

来源：https://stackoverflow.com/questions/11576458/css-vertical-float-technique

标签

html

css

css-float

vertical-alignment