2

水平フロートと同様に垂直フロートを動作させることは可能ですか? 以下の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>
4

2 に答える 2

2

相対位置を使用し、ボックスの高さの負の値として底を設定します

http://jsfiddle.net/e9uet/

于 2012-07-20T09:25:51.977 に答える