2

divを垂直方向に揃えるのに問題がありますが、何が問題になるのでしょうか？

これが私のhtmlコードです

 <div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
</div>

css

.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
} 
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
clear:both;
position:relative;
margin-left:5px;
margin-top:5px;
 }
#profile2
{
position:relative;
margin-left:310px;
margin-top:5px;    
}
#profile3
{
position:relative;
margin-left:620px;
margin-top:5px;
}

親の中で3つのdivを垂直に並べたいのですが、これがデモです

4

5 に答える 5

1

あなたが説明しているように、達成するためになぜこれほど多くの冗長コードが必要なのかわかりません。

.recentProfiles
{
    width:300px;
    border:2px dotted green;
    margin-left:20px;
    margin-top:10px;
}

.profiles
{
    width:300px;
    height:190px;
    border:2px dotted black;
}

デモ： http： //jsfiddle.net/VvqXF/

于 2013-03-27T10:12:27.220 に答える
0

プロファイルで使用float:leftしてみてください。次に、profile1、profile2、profile3では使用しないでください。classmargin

実例： http： //jsfiddle.net/rK38V/

于 2013-03-27T10:09:22.663 に答える
0

すべてのボックスを左にフロートさせ（float: left）、次のようにすべてのマージンプロパティを削除します：http：//jsfiddle.net/2ABmU/

于 2013-03-27T10:09:57.490 に答える
0

あなたはフロートの考えを間違えます。新しいコードは次のとおりです：http：//cdpn.io/AvJqI

HTML

  <div class="recentProfiles">

    <div class="profiles" id="profile1">
    </div>
    <div class="profiles" id="profile2">
    </div>
    <div class="profiles" id="profile3">
    </div>
    <div class="floatClear"></div>
 </div>

CSS

.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;

}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;

}
#profile1
{
float:left;
position:relative;
margin-left:5px;
margin-top:5px;

}
#profile2
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;

}
#profile3
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}

.floatClear {
  clear: both;
}
于 2013-03-27T10:09:57.783 に答える
0

それはあなたのマージンのためです。clear:both離陸してからすべてのプロファイルにprofile1追加する場合はfloat: left、それらのマージンを削除します。

デモ： http： //jsfiddle.net/WC5gT/

于 2013-03-27T10:10:10.793 に答える