0 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
 #content {
 margin-top: 100px;
 margin-bottom: 100px;
 }
.left { float: left; }
.middle { margin-left:511px; float: none;  }
.right {   float: right;   width: 115px;  }
#footer {
    margin-top: 300px;
    margin-bottom:11px;
    padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>css test</title>
</head>
<body>
    <div class="top">I have a dream</div>
    <div id="content">
        <div class="left">I am left</div>
        <div class="middle">I am middle</div>
        <div class="right">I am  right</div>
    </div>
    <div id="footer"> I am in the footer</div>
</body>
</html>

以上是我的html源代码。它显示在浏览器中，如下所示。 在此处输入图像描述

我的问题是为什么“我是对的”低于“我是中间人”。我认为它们应该具有相同的高度。我怎样才能改善我的css风格。谢谢。

4

3 回答 3

2

这是您更正的小提琴链接。以下是您更正的 CSS

.middle { margin-left:511px; float: left;  }

#footer {
    margin-top: 300px;
    margin-bottom:11px;
    padding:15px 15px 15px 0;
}
于 2013-07-05T04:20:15.133 回答
0

尝试使用display: inline-block您的class="left, middle, right".

浮动问题

当 CSS 代码中有浮动时的问题是，您需要采取一些预防措施以使周围元素包含浮动元素，并且还要避免代码中的跟随元素偷偷靠近它。

另一个问题是，如果您有一个浮动列表，它将占据几行（从视觉上讲）并且内容的高度不同，那么您将处于一个受伤的世界。

要了解有关 inline-block 的更多信息，请参阅Robert's Page。

JSFiddle供参考。

于 2013-07-05T04:20:13.723 回答
0

添加float: left;到您的.middle班级而不是float:none;

div是一个block元素，即它占据整个宽度，以使其像您提到的那样工作添加float:left;到middle class.

输出 -

漂浮

于 2013-07-05T04:01:35.740 回答