課程
/前端開發
/HTML/CSS
/如何用CSS進行網頁布局
把兩邊position:absolute改成float:left和right 右邊的div上不去是為什么啊top:0沒效果
2017-02-22
源自：如何用CSS進行網頁布局 4-3
正在回答
浮動元素的排序規則1.1相同方向上的浮動元素，先浮動的元素會顯示在前面，后浮動的元素會顯示在后面1.2浮動元素浮動之后的位置，由浮動元素浮動之前在標準流中的位置來確定
本例中right 右邊浮動前的位置就在第二行，所以按照浮動元素排序規則會貼靠右邊第二行
如果非得用float, ?那就把right和mian兩個盒子掉個位置，，保證前兩個盒子順序是right和left就行了
<div class="left">left</div>
<div class="right">right</div>
<div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。 雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。</div>
牡蠣先生 提問者
<!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;}
</style>
</head>
<body>
? ??
? ? <div class="left">left</div>
? ? <div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。 雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。</div>
? ? <div class="right">right</div>
</body>
</html>
親....你為什么給left設置了左浮動又給right設置了右浮動,就是不給main設置一下浮動呢?把main左右邊框設置那么高像素貌似是不明智的選擇了吧.....還有,main的寬度沒設置貌似它是自適應屏幕了.....可能我說的有很多不正確的地方誤導別人,畢竟我學的也不多,只是提出我的看法罷了,你的代碼我用工具實踐過了
慕斯4140465
舉報
用最簡潔的案例教你布局的那些知識，這是前端工程師基本技能
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-02-23
浮動元素的排序規則
1.1相同方向上的浮動元素，先浮動的元素會顯示在前面，后浮動的元素會顯示在后面
1.2浮動元素浮動之后的位置，由浮動元素浮動之前在標準流中的位置來確定
本例中right 右邊浮動前的位置就在第二行，所以按照浮動元素排序規則會貼靠右邊第二行
如果非得用float, ?那就把right和mian兩個盒子掉個位置，，保證前兩個盒子順序是right和left就行了
<div class="left">left</div>
<div class="right">right</div>
<div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。 雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。</div>
2017-02-23
<!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;}
</style>
</head>
<body>
? ??
? ? <div class="left">left</div>
? ? <div class="main">設計首頁的第一步是設計版面布局。就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。 雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。</div>
? ? <div class="right">right</div>
</body>
</html>
2017-02-23
親....你為什么給left設置了左浮動又給right設置了右浮動,就是不給main設置一下浮動呢?把main左右邊框設置那么高像素貌似是不明智的選擇了吧.....還有,main的寬度沒設置貌似它是自適應屏幕了.....可能我說的有很多不正確的地方誤導別人,畢竟我學的也不多,只是提出我的看法罷了,你的代碼我用工具實踐過了