0

以下に示すように、私のdivは階段効果を表示しています。通常、テーブルでは使用できますがvertical-align: top、divに対してこれを行う方法がわかりません。

 ____1_____     
            _____2_____      
                        ______3_____

私がこれまでに持っているCSSは次のとおりです。

   .areadiv
{
float:left;
display: inline-block;
height:auto;
margin:0 auto; 
width:130px;
padding:5px;
}

HTMLは次のとおりです。

<div>
<div class="areadiv">
content
</div>
</div>
4

3 に答える 3

1

私は@bartolsthoornと一緒にいて、あなたのCSSはかなり混乱しています。しかし、floatを使用するのではなく、のみを使用しますdisplay: inline-block。また、使用するときは、ほとんどの（すべての？）ブラウザのデフォルトを次のinline-blockように設定することを忘れないでください。vertical-alignmiddle

.areadiv {
    display: inline-block;
    vertical-align: top;
    width: 130px;
    padding: 5px;
}

必要なのはそれだけです。

于 2012-04-04T23:48:02.097 に答える
1

まず、含まれているdivの幅をfloatの合計幅よりも=または>に設定する必要があります。これにより、次の行に移動することがわかります。

例えば..

.areadiv 
{
    display: inline-block;
    vertical-align: top;
    width: 130px;
    padding: 5px;
}

.containerdiv 
{
    width: 421px; /* ( 130 + 10 ) x 3 + 1 just in case */
}

そしてHTML：

<div class="containerdiv">
    <div class="areadiv">
    </div>
    <div class="areadiv">
    </div>
    <div class="areadiv">
    </div>
</div>
于 2012-04-05T00:04:23.570 に答える
0

CSSは、実現しようとしているレイアウトではあまり意味がありません。次のようになります。

.areadiv {
  float: left;
  display: block;
  width: 130px;
  padding: 5px;
}

はコンテナdivの中央margin: 0 auto;揃えに使用され、インラインブロックは必要ありません。

于 2012-04-04T23:31:30.310 に答える