Question

<!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源代码。它在浏览器中显示如下。 enter image description here

我的问题是为什么＆＃34;我是对的＆＃34;低于＆＃34;我在中间＆＃34;。我认为他们应该有相同的高度。我怎样才能改善我的CSS风格。谢谢。

Answer 1

以下是您更正的Fiddle link。以下是您更正后的CSS

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

#footer {
    margin-top: 300px;
    margin-bottom:11px;
    padding:15px 15px 15px 0;
}

Answer 2

将float: left;添加到.middle课程而不是float:none;

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

输出 -

float

Answer 3

尝试将display: inline-block用于class="left, middle, right"。

浮动问题

当您在CSS代码中浮动时出现的问题是，您需要采取一些预防措施，使周围的元素包含浮动元素，并避免代码中的后续元素隐藏在它旁边。

另一个问题是，如果你有一个浮动的列表，它会占用几行（从视觉上来说）并且内容的高度不同，那么你就是一个受伤的世界。

要详细了解内联块，请参阅Robert's Page。

JSFiddle供参考。

CSS右侧div位置不符合预期

3 个答案: