-1

以下のhtmlを考えると、私は2つのことを探しています:

明確化:緑のボックスは現在、高さに関係なく中央に配置したいのですが、そうではありません。top:-10px/bottom:-10px は、緑色のボックスの高さが ~20px であることに基づいています。変更したら、トップ/ボトムを再調整する必要があります。これは避けたいです!

  1. 絶対top/bottom値を取り除きます（緑色のボックスの高さが異なる場合があるため）。トップ/マージントップの周りでいくつかのオプションを使用しようとしました-50%が、役に立ちませんでした.
  2. 緑色のボックスを中央揃えにします - これらは絶対位置にあるため、動作させることができませんでした。

CSS3ソリューションは、現在のバージョンの FF と Chrome で動作する必要があります。 &を使用してもかまいません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 に答える