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

0

代わりにクラスに追加float: left;します.middlefloat:none;

div要素であり、つまり、あなたが言及したblockように動作させるために、全幅を取ります.float:left;middle class

出力 -

浮く

于 2013-07-05T04:01:35.740 に答える