Question

我有一个CSS文件，mastercss4.css：

#content {
    width: 1000px;
    height: 800px;
    background-color: #b0c4de;
    margin-left: auto;
    margin-right: auto;
}

#top {
    width: 1000px;
    height: 141px;
    background-color: red;
}

#topleft {
    width: 193px;
    height: 141px;
    background-color: yellow;
    float: left;       
}

#topmid {
    width: 15px;
    height: 141px;
    background-color: green;
    float: left;
}

#topright {
    width: 797px;
    height: 141px;
    background-color: cyan;
    float: left;
}

#middle {
    width: 1000px;
    height: 598px;
    background-color: white;
    float: clear;
}

#midleft {
    width: 188px;
    height: 598px;
    background-color: aquamarine;
    float: left;    
}

#midmid {
    width: 15px;
    height: 598px;
    background-color: orange;
    float: left;
}

#midright {
    width: 797px;
    height: 598px;
    background-color: blueviolet;
    float: left;
}

#bottom {
    width: 1000px;
    height: 61px;
    background-color: blue;
    float: clear;
}

body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #000000;
}

我有一个HTML文件，default09.html：

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="test">
        <meta name="author" content="Algomeysa">
        <title>test</title>
        <link rel="stylesheet" href="mastercss4.css">
    </head>
    <body>
        <div id="content">
            <div id="top">
                <div id="topleft">tl</div> 
                <div id="topmid"></div> 
                <div id="topright">tr</div> 
            </div> 
            <div id="middle">
                <div id="midleft">ml</div> 
                <div id="midmid"></div> 
                <div id="midright">mr</div> 
            </div> 
            <div id="bottom">bottom</div> 
        </div> 
    </body>
</html>

应该导致红色，白色和蓝色条完全被覆盖顶行：黄色方框，薄绿色部分，青色方块中间行：海蓝宝石盒，薄橙色部分，蓝紫色盒子底行：蓝框

相反，右上方的青色框会下降到左中间，其他一切都会错开。

有人能发现我做错了吗？

Answer 1

将顶部宽度设置为792px。您的父容器宽度比像素容器多5个像素：

#topright{
  width: 792px;
}

Answer 2

clear不是float属性的有效值。 left，right，none，initial和inherit是float的唯一有效值。

clear本身是一个css属性，接受left，right，both，none，initial或inherit

您的代码中似乎有几个float: clear;个实例。将这些更改为类似clear: both;的内容，您应该没问题。

Answer 3

简单地改变

浮动：无

到 #topright

并将topright的宽度缩小为rquired

CSS Floats没有正确破坏

3 个答案: