横向两列布局

<!DOCTYPE HTML>

<html>

<head>

<title>横向两列布局</title>

*{margin:0;padding:0;}

#wrap{width:960px;text-align:center;background:#ccc;margin:0 auto;}

#header{height:30px;background:orange;}

#mainBody{height:500px;width:100%;background:yellow;overflow:hidden;}

.left{width:700px;height:150px; background:black;float:left;}

.right{height:500px;background:green;float:right;margin-left:710px;}

#footer{height:100px;background:purple;bottom:0;}

</style>

</head>

<body>

<div id="header">header</div>

<div id="mainBody">mainBody

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

</div>

<div id="footer">footer</div>

</div>

</body>

</html>为什么我右边的视图出来没有right呢，？？

想要飞的鱼儿

2016-03-22

源自：网页布局基础 3-5

关注问题我要回答

578

操作

收起

4 回答

慕移动8439618
2016-04-06

把margin-left:710px;改成margin-left:10px；就可以了按照你原先的写法中间的间距有710PX 那么大

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

收起回答

mistyrain98
2016-03-23

.right{height:500px;background:green;float:right;margin-left:710px;}中 margin-left:710px; 不妥，left占了左边700px，只剩260px,你却要710px，只好另起行，毕竟不是用position 相对位置与绝对位置，这种情况下用%比较好吧。.left的width 80%，.right的 18%……你自己调吧