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

2024-07-11 08:29:14

字體：大中小

供稿：網(wǎng)友

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

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

左邊固定，右邊自適應(yīng)布局，這個(gè)第一點(diǎn)應(yīng)該來說是非常的容易，實(shí)現(xiàn)的方法也是相當(dāng)?shù)亩啵敲淳涂梢哉f第一條要求已不是什么要求了；
左右兩列等高布局，這一點(diǎn)相對(duì)來說要復(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)過，那么我就在此稍微介紹兩種常用的方法：

方法一：浮動(dòng)布局

這種方法我采用的是左邊浮動(dòng)，右邊加上一個(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

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

上一篇：修復(fù)iPhone的safari瀏覽器上submit按鈕圓角bug

下一篇：div css 滾動(dòng)條樣式 DIV滾動(dòng)條屬性及樣式設(shè)置方式