0

フロートを理解していると思っていましたが、そうではないようです。

左にフロートした div (#service-list) があり、その直後に別の div (#social) を追加し、左にもフロートしました。

何が起こっているのかというと、div に収まる十分なスペースがあるにもかかわらず、新しい行にプッシュされた後の 2 番目の div です。

#service-list{
width: 660px;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
border-left: 1px solid #808080;
float: left;
padding: 15px 0 20px 15px;
margin: 0 0 0 25px;
clear: both;
}
#social{
width: 200px;
float: right;
clear: left;
border: #666 solid 1px;
}

URL は次のとおりです: http://s361608839.websitehome.co.uk/101d/tim/index.html

ありがとう、ティム

4

3 に答える 3

1

フロート要素を発生させる前に、多くの場所で使用clearしているため、適切にフロートできません。次のようにして、これを機能させることができました。

  1. DOM の#social前に移動#services-list
  2. から削除clear: bothし#services-listます（そうしないと浮きません）
于 2013-02-11T02:05:02.270 に答える
1

削除する

<div class="clearfix"></div>

そしてclear: left;、#social

#social{
    width: 200px;
    float: right; /* You should better use float: left */
    border: #666 solid 1px;
}
于 2013-02-11T02:01:26.393 に答える
0

service-list と social の間に clearfix がありますclear:both-したがって、当然フローティングではありません- clear:left in service-list も間違っています..

于 2013-02-11T02:00:55.000 に答える