Code Organization
The scalability, maintainability and flexibility of an ...
資訊專欄INFORMATION COLUMN
摘要：這里，要注意到并沒有浮動，我試了一下讓它浮動，它就變成了這個樣子原來，的自動寬度是相對于父元素的，它會把父元素剩余的部分全部撐滿，而左右欄是浮動的，因此并不占據空間。
問題是這樣的，先上圖：
最初我的想法很簡單，三個浮動的欄，左右兩邊固定寬度，中欄寬度為auto，但是一個用負外邊距實現的解決方案讓我很費解，方案是這樣的：
html代碼：
Layout Test
Architecting Your App in Ext JS 4
Code Organization
The scalability, maintainability and flexibility of an ...
CSS代碼：
* {
margin: 0;
padding: 0;
}
body {
font: 1em helvetica,arial,sans-serif;
}
div#mian_wrapper {
min-width: 600px;
max-width: 1100px;
/*超過最大寬度時，布局居中*/
margin: 0 auto;
}
header {
padding: 5px 10px;
background: #3f7ccf;
}
div#threecolwrap {
/*浮動強制它包圍浮動的欄*/
float: left;
width: 100%;
}
div#twocolwrap {
float: left;
width: 100%;
/*把右欄拉到區塊外邊距騰出的位置上*/
margin-right: -210px;
}
nav {
padding: 20px 0px;
width: 150;
float: left;
background: #f00;
}
nav li {
/*去掉列表項目符號*/
list-style-type: none;
}
nav > *{margin: 0 10px}
article {
width: auto;
/*float: left;*/
background: #eee;
padding: 20px 0px;
margin-left: 150px;
/*在流動居中的欄右側騰出空間*/
margin-right: 210px;
}
article > *{
margin: 0 20px;
}
aside {
padding: 20px 0px;
float: left;
background: #ffed53;
width: 210;
}
aside > *{
margin: 0 10px;
}
footer {
clear: both;
width: 100%;
text-align: center;
background: green;
}
以上方案大致是：將左中欄和左中右欄分別用div包裹，然后給twocolwrap設了-210px的右外邊距，article設了210px的右邊距，因為前面自己愚蠢的想法導致很不能理解這個方案。
這里，要注意到article并沒有浮動，我試了一下讓它浮動，它就變成了這個樣子：
原來，article的自動寬度是相對于父元素的，它會把父元素剩余的部分全部撐滿，而左右欄是浮動的，因此并不占據空間。
這樣一來，我才明白了上面那個方案要干什么，應該不用多說了。。。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111666.html
摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下，布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設計指南》的讀書筆記，用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...
摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下，布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。 這是《CSS設計指南》的讀書筆記，用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...
摘要：方法首先使用一個包住左側欄和中間欄，再用一個大的包住左中右三個欄。如下面代碼所示這是左邊欄這是中間欄這是右邊欄那么具體布局代碼如下這個方法的主要思想是布局中欄的時候，要把設置為，保證中欄的寬度自適應。 方法1 首先使用一個wrap包住左側欄和中間欄，再用一個大的wrap包住左中右三個欄。 如下面代碼所示 這是左邊欄 ...
摘要：經典方法三欄布局的方法有很多種，其中最經典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內容創建的方式，通過來實現布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網頁內容以三列的形式呈現。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...
摘要：經典方法三欄布局的方法有很多種，其中最經典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內容創建的方式，通過來實現布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。 三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網頁內容以三列的形式呈現。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...
閱讀 2089·2021-11-23 09:51
閱讀 3697·2021-10-20 13:49
閱讀 1706·2021-09-06 15:13
閱讀 1816·2021-09-06 15:02
閱讀 3154·2021-09-02 15:11
閱讀 889·2019-08-29 15:37
閱讀 1731·2019-08-29 13:24
閱讀 2274·2019-08-29 11:28
