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