                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

如何像效果图一样两边有白色间隙

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body{ margin:0; padding:0; font-size:30px; font-weight:bold}

div{ text-align:center; line-height:50px}

.main{ width:960px; height:600px; margin:0 auto}

.left{ width:300px; height:600px; background:#ccc; float:left;}}/*左浮动样式*/

.right{ width:660px; height:600px; background:#FCC; float:right;}/*右浮动样式*/

</style>

</head>

<body>

<div class="right">right</div>

</div>

</body>

</html>

要是在中间要间隙只需要将左右两边width各减少10px,中间就可以有20px，那两边要怎么实现呢？

慕斯2187942

2018-07-18

源自：如何用CSS进行网页布局 3-3

关注问题我要回答

1607

操作

收起

4 回答

慕容8429861 回答被采纳 +2 积分
2018-07-19

楼主可以参考下下面的代码

<!DOCTYPE html>

<head>

<title>Document</title>

margin: 0;

padding: 0;

}

.main{

width:1500px;

height:auto;

margin:0 auto;

}

.left{

width: 29%;

height:400px;

background: violet;

float: left;

}

.right{

width: 69%;

height:400px;

background: blue;

float:right;

}

</style>

</head>

<body>

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

慕斯2187942 提问者

一不小心按成自己回答了，多谢你这么认真帮我解答，但我刚刚在DW中还是试过不行，跑偏了，但是我突然想到一个办法，终于实现了，就是把左右两边宽度各减20PX再添加margin-left和margin-right就可以了。修改后是 .left{ width:280px; height:600px; background:#ccc; float:left;margin-left:10px}/*左浮动样式*/ .right{ width:640px; height:600px; background:#FCC; float:right;margin-right:10px}/*右浮动样式*