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

2列布局中再3列布局搞不了

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

<head>

<title>无标题文档</title>

.sd{height:300px;width:45%;background:#379;float:left;}

.ds{height:300px;width:55%;background:#F06;float:right;}

.ab{width:100px;height:300px;top:0;left:0; background:#00C; float:left;position:absolute;}

.ac{height:300px;margin:0 120px 0 100px;}

.ad{width:120px;height:300px; top:0;right:0;background:#00C; float:right;position:absolute;}

</style>

</head>

</div>

<body>

</body>

</html>

慕粉4028105

2016-09-24

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

关注问题我要回答

494

操作

收起

2 回答

mtgaoyang
2016-10-08

您好，布局时，需要先清理body体的默认样式，然后3列布局时不需要浮动，还有好像你的body位置错了。

<style type="text/css">
    
    body{margin:0;padding:0;}
    .sd{height:300px;width:45%;background:#379;float:left;} 
    
    .ds{height:300px;width:55%;background:#F06;float:right;}
    
    .ab{width:100px;height:300px;top:0;left:0; background:#00C;position:absolute;}
    
    .ac{height:300px;margin:0 120px 0 100px;}
    
    .ad{width:120px;height:300px; top:0;right:0;background:#00C;position:absolute;}
</style>