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>

问题是第二个和第三个 div 没有与第一个正确（水平）对齐。由于某些原因，垂直偏移使第二个和第三个 div 看起来比第一个低一点。为什么是这样？

谢谢

附言

我在 MacOS X 上使用 Chrome 25。希望它有所帮助。

4

2 回答 2

3

这是因为您在三个红色框clear: both;的父容器上，如果您删除该属性，所有三个将按预期对齐。

您需要在最后一次浮动关闭之后</div>包含 clear 属性，或者您可以使用 clearfix 使用容器上::after的伪元素来清除其中的浮动元素。

您可以看到容器现在尊重浮动的红色框..

jsBIN

于 2013-03-10T23:07:17.990 回答
1

随意戳戳告诉我修复偏移的方法是从三个ed的clear: both;父级中删除声明：<div>float<div>

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

要使父级<div>“环绕” floated <div>，您需要在 ed 之后添加clear一个<div>ed float：

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

您还可以使用“clearfix”（例如HTML 5 Boilerplate中包含的那个<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 回答