                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /如何用CSS進行網頁布局

如果在left middle right 外加一個main并且固定main的寬度，如何實現上述案例

godxiaoxiong

2016-03-17

源自：如何用CSS進行網頁布局 4-1

關注問題我要回答

651

操作

收起

4 回答

Geminihope
2016-03-25

如果你想設置main的具體寬度，則大于等于left和right的寬度。大于left和right可以顯示middle，如果是等于則left和right所在的那一行就無法顯示middle。如果middle的高度大于left和right，則下方可以顯示

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

收起回答

Geminihope
2016-03-25

main的寬度自己設置，如果不想設置固定值，也可以用100%，全屏；可以居中也可以不居中，關鍵是要相對定位

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

收起回答

十年4
2016-03-17

<!DOCTYPE html>

<html>

<head>

<title>混合布局編程挑戰</title>

body{margin:0; padding:0; font-size:30px; color:#fff}

.top{height:100px;background:gray;}

.main{height:600px;width:100%;background:red;position:relative;}

.left{width:200px;height:600px;background:blue;position:absolute;left:0px;top:0px;}

.middle{height:600px;background:green;margin:0 210px;}

.right{width:200px;height:600px;background:blue;position:absolute;right:0px;top:0px;}

.foot{height:50px;background:orange;clear:both;}

</style>

</head>

<body>

? ? <div class="right">right</div><div class="middle">middle</div><div class="left">left</div>

</div>

</body>

</html>

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

收起回答

godxiaoxiong 提問者

好像不對呀，我是想知道main固定寬度

2016-03-18 回復有任何疑惑可以回復我~

十年4 回復 godxiaoxiong 提問者

你說的main是left right middle的父元素嗎？

2016-03-21 回復有任何疑惑可以回復我~

godxiaoxiong 提問者回復十年4

嗯是的

2016-03-24 回復有任何疑惑可以回復我~

qq_須臾_2
2016-03-17

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute;left:0; top:0;}
.main{height:600px; background:#9CF;margin:0 300px 0 200px;}
.right{ height:600px; width:300px; position:absolute; top:0;right:0;background:#FCC;}
.main2{width:800px;margin:0 auto;position:relative}
</style>
</head>

<body>
??? <div class="main2">
??? <div class="left">left</div>
??? <div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。</div>
??? <div class="right">right</div>
??? <div class="main2">
</body>
</html>