欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

左定寬度右自適應(yīng)寬度并且等高布局實(shí)現(xiàn)代碼

  發(fā)布時(shí)間：2012-12-24 15:55:40   作者：佚名   我要評論
左側(cè)固定寬，右側(cè)自適應(yīng)屏幕寬;左右兩列，等高布局;左右兩列要求有最小高度，例如：200px;（當(dāng)內(nèi)容超出200時(shí)，會自動以等高的方式增高）要求不用JS或CSS行為實(shí)現(xiàn),那么下面我們就先來看看如何實(shí)現(xiàn)

今天有位朋友一早轉(zhuǎn)來一個(gè)有關(guān)于CSS布局的面試題，需要解決，花了點(diǎn)時(shí)間寫了幾個(gè)DEMO,放上來與大家分享受。那么我們在看DEMO之前一起先來看看這個(gè)面試題的具體要求吧：

左側(cè)固定寬，右側(cè)自適應(yīng)屏幕寬；
左右兩列，等高布局；
左右兩列要求有最小高度，例如：200px;（當(dāng)內(nèi)容超出200時(shí)，會自動以等高的方式增高）
要求不用JS或CSS行為實(shí)現(xiàn)；
仔細(xì)分析試題要求，要達(dá)到效果其實(shí)也并不是太難，只是給人感覺像有點(diǎn)頭疼的問題一樣。但是你仔細(xì)看后你會覺得不是那么回事：

左邊固定，右邊自適應(yīng)布局，這個(gè)第一點(diǎn)應(yīng)該來說是非常的容易，實(shí)現(xiàn)的方法也是相當(dāng)?shù)亩?，那么就可以說第一條要求已不是什么要求了；
左右兩列等高布局，這一點(diǎn)相對來說要復(fù)雜一些，不過你要是了解了怎么實(shí)現(xiàn)等高布局，那么也是不難。我個(gè)人認(rèn)為這個(gè)考題關(guān)鍵之處就在考這里，考你如何實(shí)現(xiàn)等高布局；所以這一點(diǎn)你需要整明白如何實(shí)現(xiàn)；
至于第三條要求，應(yīng)該來說是很方面的，我們隨處都可以看到實(shí)現(xiàn)最小高度的代碼；
第四條這個(gè)要求我想是考官想讓我們面試的人不能使用js來實(shí)現(xiàn)等高布局和最小高度的功能。
上面簡單的分析了一下實(shí)現(xiàn)過程，那么最終關(guān)鍵之處應(yīng)該是就是“讓你的代碼要能同時(shí)實(shí)現(xiàn)兩點(diǎn)，其一就是左邊固定，右邊自適應(yīng)的布局；其二就是實(shí)現(xiàn)兩列等高的布局”，如果這兩個(gè)功能完成，那么你也就可以交作業(yè)了。那么下面我們就先來看看這兩 點(diǎn)是如合實(shí)現(xiàn)：

一、兩列布局：左邊固定寬度，右邊自適應(yīng)寬度
這樣的布局，其實(shí)不是難點(diǎn)，我想很多同學(xué)都有實(shí)現(xiàn)過，那么我就在此稍微介紹兩種常用的方法：

方法一：浮動布局

這種方法我采用的是左邊浮動，右邊加上一個(gè)margin-left值，讓他實(shí)現(xiàn)左邊固定，右邊自適應(yīng)的布局效果

HTML Markup

復(fù)制代碼
代碼如下:

<div id="left" >Left sidebar </div>
<div id="content" >Main Content </div>

CSS Code

復(fù)制代碼
代碼如下:

<style type="text/css" >
*{
margin: 0;
padding: 0;
}
#left {
float: left;
width: 220px;
background-color: green;
}
#content {
background-color: orange;
margin-left: 220px;/*==等于左邊欄寬度==*/
}
</style>

上面這種實(shí)現(xiàn)方法最關(guān)鍵之處就是自適應(yīng)寬度一欄“div#content”的“margin-left”值要等于固定寬度一欄的寬度值，大家可以點(diǎn)擊查看上面代碼的DEMO

方法二：浮動和負(fù)邊距實(shí)現(xiàn)

這個(gè)方法采用的是浮動和負(fù)邊距來實(shí)現(xiàn)左邊固定寬度右邊自適應(yīng)寬度的布局效果，大家可以仔細(xì)對比一下上面那種實(shí)現(xiàn)方法，看看兩者有什么區(qū)別：

HTML Markup

復(fù)制代碼
代碼如下:

<div id="left" >
Left Sidebar
</div>
<div id="content" >
<div id="contentInner" >
Main Content
</div>
</div>

CSS Code

復(fù)制代碼
代碼如下:

*{
margin: 0;
padding: 0;
}
#left {
background-color: green;
float: left;
width: 220px;
margin-right: -100%;
}

#content {
float: left;
width: 100%;
}

#contentInner {
margin-left: 220px;/*==等于左邊欄寬度值==*/
background-color: orange;
}

這種方法看上去要稍微麻煩一點(diǎn)，不過也是非常常見的一種方法，大家可以看看他的DEMO效果。感覺一下，和前面的DEMO有什么不同之處。

我在這里就只展示這兩種方法，大家肯定還有別的實(shí)現(xiàn)方法，我就不在多說了，因?yàn)槲覀兘裉煲f的不是這個(gè)問題。上面完成了試題的第一種效果，那么大家就要想辦法來實(shí)現(xiàn)第二條要求——兩列等高布局。這一點(diǎn)也是本次面試題至關(guān)重要的一點(diǎn)，如果你要是不清楚如何實(shí)現(xiàn)等高布局的話，我建議您先閱讀本站的《八種創(chuàng)建等高列布局》，里面詳細(xì)介紹了八種等高布局的方法，并附有相關(guān)代碼，而且我們后面的運(yùn)用中也使用了其中的方法。

現(xiàn)在關(guān)鍵的兩點(diǎn)都完成了，那么我們就需要實(shí)現(xiàn)第三條要求，實(shí)現(xiàn)最小高度的設(shè)置，這個(gè)方法很簡單：

復(fù)制代碼
代碼如下:

min-height: 200px;
height: auto !important;
height: 200px;

上面的代碼就輕松的幫我們實(shí)現(xiàn)了跨瀏覽器的最小高度設(shè)置問題。這樣一來，我們可以交作業(yè)了，也完面了這個(gè)面試題的考試。為了讓大家更能形象的了解，我在這里為大家準(zhǔn)備了五種不同的實(shí)現(xiàn)方法：

方法一：

別的不多說，直接上代碼，或者參考在線DEMO，下面所有的DEMO都有HTML和CSS代碼，感興趣的同學(xué)自己慢慢看吧。

HTML Markup

復(fù)制代碼
代碼如下:

<div id="container" >
<div id="wrapper" >
<div id="sidebar" >Left Sidebar </div>
<div id="main" >Main Content </div>
</div>
</div>

CSS Code

復(fù)制代碼
代碼如下:

<style type="text/css" >
* {
margin: 0;
padding: 0;
}
html {
height: auto;
}
body {
margin: 0;
padding: 0;
}
#container {
background: #ffe3a6;
}
#wrapper {
display: inline-block;
border-left: 200px solid #d4c376;/*==此值等于左邊欄的寬度值==*/
position: relative;
vertical-align: bottom;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;/*==此值等于左邊欄的寬度值==*/
position: relative;
}
#main {
float: left;
}
#maing,
#sidebar{
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>

方法二

HTML Markup

復(fù)制代碼
代碼如下:

<div id="container" >
<div id="left" class="aside" >Left Sidebar </div>
<div id="content" class="section" >Main Content </div>
</div>

CSS Code

復(fù)制代碼
代碼如下:

<style type="text/css" >
*{margin: 0;padding: 0;}
#container {
overflow: hidden;
}
#left {
background: #ccc;
float: left;
width: 200px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#content {
background: #eee;
margin-left: 200px;/*==此值等于左邊欄的寬度值==*/
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#left,
#content {
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>

方法三：

HTML Markup

復(fù)制代碼
代碼如下:

<div id="container" >
<div id="content" >Main Content </div>
<div id="sidebar" >Left Sidebar </div>
</div>

CSS Code

復(fù)制代碼
代碼如下:

*{margin: 0;padding: 0;}
#container{
background-color:#0ff;
overflow:hidden;
padding-left:220px; /* 寬度大小等與邊欄寬度大小*/
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-left:220px solid #f00;/* 寬度大小等與邊欄寬度大小*/
margin-left:-220px;/* 寬度大小等與邊欄寬度大小*/
float:right;
}
#sidebar{
background-color:#f00;
width:220px;
float:right;
margin-left:-220px;/* 寬度大小等與邊欄寬度大小*/
}
#content,
#sidebar {
min-height: 200px;
height: auto !important;
height: 200px;
}

方法四：

HTML Markup

復(fù)制代碼
代碼如下:

<div id="container2" >
<div id="container1" >
<div id="col1" >Left Sidebar </div>
<div id="col2" >Main Content </div>
</div>
</div>

CSS Code

復(fù)制代碼
代碼如下:

*{padding: 0;margin:0;}
#container2 {
float: left;
width: 100%;
background: orange;
position: relative;
overflow: hidden;
}
#container1 {
float: left;
width: 100%;
background: green;
position: relative;
left: 220px;/* 寬度大小等與邊欄寬度大小*/
}

#col2 {
position: relative;
margin-right: 220px;/* 寬度大小等與邊欄寬度大小*/
}

#col1 {
width: 220px;
float: left;
position: relative;
margin-left: -220px;/* 寬度大小等與邊欄寬度大小*/
}

#col1,#col2 {
min-height: 200px;
height: auto !important;
height: 200px;
}

方法五：

HTML Markup

復(fù)制代碼
代碼如下:

<div id="container1" >
<div id="container" >
<div id="left" >Left Sidebar </div>
<div id="content" >
<div id="contentInner" >Main Content </div>
</div>
</div>
</div>

CSS Code

復(fù)制代碼
代碼如下:

*{padding: 0;margin: 0;}
#container1 {
float: left;
width: 100%;
overflow: hidden;
position: relative;
background-color: #dbddbb;
}
#container {
background-color: orange;
width: 100%;
float: left;
position: relative;
left: 220px;/* 寬度大小等與邊欄寬度大小*/
}
#left {
float: left;
margin-right: -100%;
margin-left: -220px;/* 寬度大小等與邊欄寬度大小*/
width: 220px;
}
#content {
float: left;
width: 100%;
margin-left: -220px;/* 寬度大小等與邊欄寬度大小*/
}
#contentInner {
margin-left: 220px;/* 寬度大小等與邊欄寬度大小*/
overflow: hidden;
}

#left,
#content {
min-height: 200px;
height: auto !important;
height: 200px;
}

針對上面的面試題要求，我一共使用了五種不同的方法來實(shí)現(xiàn)，經(jīng)過測試都能在各瀏覽器中運(yùn)行，最后我有幾點(diǎn)需要特別提出：

上面所有DEMO中，要注意其方向性的配合，并且值要統(tǒng)一，如果您想嘗試使用自己布局需要的寬度值，請對照相關(guān)代碼環(huán)節(jié)進(jìn)行修改；
上面所有DEMO中，沒有設(shè)置他們之間的間距，如果您想讓他們之間有一定的間距，有兩種方法可能實(shí)現(xiàn)，其一在上面的DEMO基礎(chǔ)上修改相關(guān)參數(shù)，其二，在相應(yīng)的里面加上"div"標(biāo)簽，并設(shè)置其“padding”值，這樣更安全，不至于打破你的布局
因?yàn)槲覀冞@里有一列使用了自適應(yīng)寬度，在部分瀏覽器下，當(dāng)瀏覽器屏幕拉至到一定的大小時(shí)，給我們帶來的感覺是自適應(yīng)寬度那欄內(nèi)容像是被隱藏，在你的實(shí)際項(xiàng)目中最好能在“body”中加上一個(gè)“min-width”的設(shè)置。

那么有關(guān)于這個(gè)面試題，就我自己的拙見，就說到這吧。希望大家會喜歡這樣的答案，如果您有更好的答案，煩請告訴我一下，讓我也好好學(xué)習(xí)學(xué)習(xí)。如果大有發(fā)現(xiàn)有什么錯(cuò)誤，或者對這個(gè)有更好的意見，可以在下面的評論中直接給我留言。

相關(guān)文章

最新評論