課程
/前端開發
/HTML/CSS
/網頁布局基礎
不管二列還是多列 不都是對自適應元素設置 絕對定位的嗎？ 為什么我在其他課程里看到三列布局中中間元素設置自適應的時候反而是在左右兩邊設置了絕對定位？
2016-01-06
源自：網頁布局基礎 4-4
正在回答
其實在哪個元素上設置屬性沒有什么太大的關系，設置absolute的目的只是為了使其脫離文檔流（不使用的話元素仍然是塊級元素，直觀表現就是會使后面的兄弟元素另起一行）。然后搭配magin值使其產生與父元素的間距，最后表現出來的就是自適應（margin值不變）。
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; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; right:0;top:0; position:absolute; background:#FCC;}
</style>
</head>
<body>
? ??<div class="left">left</div>
? ? <div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。 雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。</div>
? ? <div class="right">right</div>
</body>
我說的就是這行代碼?。。。。?！
舉報
讓你精通CSS中三大定位機制，徹底掌握網頁布局的相關知識
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-01-06
其實在哪個元素上設置屬性沒有什么太大的關系，設置absolute的目的只是為了使其脫離文檔流（不使用的話元素仍然是塊級元素，直觀表現就是會使后面的兄弟元素另起一行）。然后搭配magin值使其產生與父元素的間距，最后表現出來的就是自適應（margin值不變）。
2016-01-06
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; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; right:0;top:0; position:absolute; background:#FCC;}
</style>
</head>
<body>
? ??<div class="left">left</div>
? ? <div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。 雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。</div>
? ? <div class="right">right</div>
</body>
我說的就是這行代碼?。。。。?！