Question

如图。HTML怎么把页面分成3部分？

分是分好了，可是那个边框。怎么让每个div之间不要紧贴在一起啊。上下左右都留点空白。我在这3个div最外面也有一层大的div.用了padding和margin都不行，我疯了。。。。

Answer 1

上面那两个div设置百分比宽度不要占满,
<section class="one">
<section class="two">
<section class="ss"></section>
<section class="three"></section>
</section>
<aside></aside>
</section>
<footer>footer</footer>
CSS

.one{
width:1240px;
height:340px;
margin:16px auto 16px;
}
.one .two{
width:702px;
height:320px;
background:#333;
float:left;
border-radius:5px;
border:10px solid #666;
}
.one .two .ss{
width:702px;
height:155px;
background:#333;
float:left;
border-radius:5px;

}
.one .two .three{
width:702px;
height:155px;
background:#333;
border-radius:5px;
border-top:10px solid #666;
float:left;

}
aside{
width:492px;
height:340px;
background:#666;
float:right;
border-radius:5px;
}
footer{
width:1240px;
height:60px;
background:#666;
border-radius:5px;
margin:0 auto 10px;
text-align: center;
line-height:60px;
color:white;
font-size:28px;

}

追问

没啊，还有那么大留白了。

Answer 2

不要用浮动，用padding就可以

追问

不设浮动，padding四个方向都设了值。结果div都是一行一行的了。还有那么留白 也并没有一行埃在一起

追答

可以这样布局：

div1 左浮动 div2 右浮动 再设置一个边距
最下面一个div

追问

追答

这个地方要加一个清除浮动，不过你好像不是按照我给你写的那样写的

追问

就这样了…绿的那个直接移上去了 头疼

对了…div1和2外层的那个div我设了样式了…去除了就好了

追答

你要这样的是不？

追问

是啊大哥 怎么写的😭😭😭

追答

拿去参考一下吧，不规范

追问

昂。👌谢谢🙏

Answer 3

都别和我抢啊，都是it男，教你个最笨的方法，用一个dip在中间就隔开了

Answer 4

你可以用Bootstrap