CSS垂直浮动技术 [英] CSS Vertical Float Technique
问题描述
有可能有一个垂直浮动工作类似于水平的？在下面的Html中，我希望绿色按钮是现在的，黄色浮动到底部超出灰色边缘。
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>
更新1 - 这里有点接近 m试图实现。我正在寻找一个垂直均匀的面板，即它的孩子之间的距离应该是相同的。我设法使用水平布局，但是坚持垂直实现。
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>
推荐答案
使用相对位置并将底部设为负的盒子高度
using relative position and and set the bottom as the negative of the box height
这篇关于CSS垂直浮动技术的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
