                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

510

操作

收起

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>