1

私は次のコードを持っています：

<!DOCTYPE html>
<html>
  <head>
    <title>Home page</title>
    <style type="text/css">
      .mydiv {
        width:300px;float:left;background-color:#ff0000;height:250px;margin-right:10px
      }
    </style>
  </head>
  <body>
    <div style="margin-left:auto;margin-right:auto;width:1000px;clear:both">
      <div style="margin-right:auto;margin-left:auto;text-align:center;margin-top:5px;">This is the title</div>
    </div>
    <div style="margin-right:auto;margin-left:auto;clear:both;width:1000px;margin-top:10px">    
      <div class="mydiv">Div</div>
      <div class="mydiv">Div</div>
      <div class="mydiv">Div</div>
    </div>
  </body>
</html>

問題は、2番目と3番目のdivが最初のdivと（水平方向に）適切に位置合わせされていないことです。いくつかの理由で、垂直オフセットにより、2番目と3番目のdivが最初のdivより少し低く表示されます。どうしてこれなの？

ありがとうございました

PS

私はMacOSXでChrome25を使用しています。それが何らかの形で役立つことを願っています。

4

2 に答える 2

3

これは、3つの赤いボックスclear: both;の親コンテナがあるため、そのプロパティを削除すると、3つすべてが期待どおりに配置されます。

最後のフロートクローズの後にclearプロパティを含める必要があります。または、コンテナの疑似要素を使用してコンテナ内のフロート要素をクリア</div>するclearfixを使用できます。::after

コンテナが浮いた赤いボックスを尊重していることがわかります。

jsBIN

于 2013-03-10T23:07:17.990 に答える
1

ランダムに突っついていると、オフセットを修正する方法は、3つのedのclear: both;親から宣言を削除することです。<div>float<div>

<div style="width: 1000px">    
  <div style="…">Div</div>
  <div style="…">Div</div>
  <div style="…">Div</div>
</div>

親がed<div>を「ラップアラウンド」するようにするには、 edの後にedを追加する必要があります。float<div>clear<div>float

<div style="width: 1000px">    
  <div style="…">Div</div>
  <div style="…">Div</div>
  <div style="…">Div</div>
  <div style="clear: both;" />
</div>

「clearfix」を使用することもできます（たとえば、次のものを含むHTML5ボイラープレートのもの<div>） 。

<div class="clearfix" style="width: 1000px">    
  <div style="…">Div</div>
  <div style="…">Div</div>
  <div style="…">Div</div>
</div>
于 2013-03-10T23:13:18.557 に答える