本人菜鸟刚学DIV+CSS，求解这种布局怎么写？尤其是倒数第二行（四个矩形）

发布网友发布时间：2022-04-23 22:45

共4个回答

热心网友时间：2023-10-12 15:21

一种方法是用浮动布局，另一种是用绝对定位布局。以下是浮动方法：

float布局.html 文件代码清单如下：

<!doctype html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>float布局</title>
        <link rel="stylesheet" href="floatdiv.css">
    </head>

    <body>
        <div id="wrapper">
          <div id="div1" class="one"></div>
          <div id="div2" class="one"></div>
          <div id="div3" class="one"></div>
          <div id="div4"></div>
          <div id="div5" class="two"></div>
          <div id="div6" class="two"></div>
          <div id="div7" class="two"></div>
          <div id="div8" class="two"></div>
          <div id="div9"></div>
        </div>
    </body>
</html>

floatdiv.css 文件代码清单如下：

/* floatdiv.css */
#wrapper {
width: 100%;
}
div {
margin-bottom: 2%;
height: 100px;
}
.one {
height: 200px;
}
#div1 {
float: left;
width: 38%;
background: #990100;
}
#div2 {
float: left;
margin-right: 2%;
margin-left: 2%;
width: 29%;
background: #3399fe;
}
#div3 {
float: right;
width: 29%;
background: #00ff01;
}
#div4 {
clear: both;
width: 100%;
background: #0000fe;
}
.two {
float: left;
}
#div5 {
margin-right: 2%;
width: 18%;
background: #999965;
}
#div6 {
margin-right: 2%;
width: 18%;
background: #99fe00;
}
#div7 {
margin-right: 2%;
width: 29%;
background: #0ff;
}
#div8 {
float: right;
width: 29%;
background: #ccc;
}
#div9 {
clear: both;
width: 100%;
height: 80px;
background: #000;
}

对于ie的很多版本而言，以上CSS的代码需要调整宽度，使每行的宽度小于100%，这样就行。

热心网友时间：2023-10-12 15:22

倒数第二行和第一行一个道理啊，像一楼兄弟说的，给div一个float属性，控制宽度就可以。颜色当然用填充啊，默认是白色的。

热心网友时间：2023-10-12 15:22

热心网友时间：2023-10-12 15:23

用盒子的浮动属性就能很好的解决

全部栏目

本人菜鸟刚学DIV+CSS，求解这种布局怎么写？尤其是倒数第二行（四个矩形）