-1

鉴于下面的 html，我正在寻找两件事：

澄清：我想保持绿色框居中，因为它们目前与它们的高度无关，但事实并非如此。top:-10px/bottom:-10px 基于绿框高度约为 20px，一旦改变顶部/底部需要重新调整，我想避免！

  1. 摆脱绝对top/bottom值（因为绿色框的高度可能会有所不同），我尝试使用 top/margin-top 周围的一些选项，-50%但无济于事。
  2. 将我的绿色框居中对齐 - 因为它们是绝对定位的，所以我无法让它工作。

该解决方案必须适用于当前版本的 FF 和 Chrome，我不介意使用CSS3& HTML5。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style="height: 400px; width: 30px; border: 1px solid #ccc; margin: 50px auto auto 50px;">
        <table style="table-layout: fixed; border-collapse: collapse; height: 100%; width: 100%;">
            <tr>
                <td style="height: 50%;">
                    <div style="height: 100%; width: 100%; position: relative;">
                        <div style="top: -10px; border: 1px solid #ccc; background-color: Green; position: absolute; ">A</div>   
                        <div style="bottom: -10px; border: 1px solid #ccc; background-color: Green; position: absolute;">B</div>   
                    </div>
                </td>
            </tr>
            <tr>
                <td style="height: 50%;">
                    <div style="height: 100%; width: 100%; position: relative;">
                        <div style="bottom: -10px; border: 1px solid #ccc; background-color: Green; position: absolute;">C</div>   
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
4

1 回答 1

0

试试这个代码：

HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <div id="container">
            <div class="product" align="center">A</div>
            <div class="product" align="center">B</div>
            <div class="product" align="center">C</div>
        </div>
    </body>
</html>

CSS：

#container{position:relative; width:30px; height:400px; border:1px solid #CCCCCC;   margin: 50px auto auto 50px; }



.product {position:relative; margin-top:20px; margin-left:5px; margin-right:5px; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; background-color:Green;}
于 2012-12-05T08:40:11.717 回答