思路一: float

說(shuō)起兩列布局，最常見(jiàn)的就是使用float來(lái)實(shí)現(xiàn)。float浮動(dòng)布局的缺點(diǎn)是浮動(dòng)后會(huì)造成文本環(huán)繞等效果，以及需要及時(shí)清除浮動(dòng)。如果各浮動(dòng)元素的高度不同時(shí)，可能會(huì)出犬牙交錯(cuò)的效果

在東城等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需設(shè)計(jì)網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),營(yíng)銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站制作,東城網(wǎng)站建設(shè)費(fèi)用合理。

【1】float + margin

將定寬的一列使用float，而自適應(yīng)的一列使用計(jì)算后的margin

<style>p{margin: 0;}.parent{overflow: hidden;zoom: 1;}.left{float: left;width: 100px;}    .right{margin-left: 120px;}</style>

<div class="parent" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <p>right</p>
        <p>right</p>
    </div></div>

[缺點(diǎn)1]IE6-瀏覽器下3像素bug，具體表現(xiàn)在右側(cè)首行文字會(huì)向右偏移3px。解決辦法是在left元素上設(shè)置margin-right: -100px

[缺點(diǎn)2]當(dāng)右側(cè)容器中有元素清除浮動(dòng)時(shí)，會(huì)使該元素不與左側(cè)浮動(dòng)元素同行，從而出現(xiàn)文字下沉現(xiàn)象

【2】float + margin + (fix)

(fix)代表增加結(jié)構(gòu)，為了解決上述方法中的兩個(gè)缺點(diǎn)，可以通過(guò)增加結(jié)構(gòu)來(lái)實(shí)現(xiàn)。自適應(yīng)的一列外側(cè)增加一層結(jié)構(gòu).rightWrap并設(shè)置浮動(dòng)。要實(shí)現(xiàn)自適應(yīng)效果，.rightWrap寬度必須設(shè)置為100%。若不設(shè)置，float后的元素寬度將由內(nèi)容撐開(kāi)。同時(shí)再配合盒模型屬性的計(jì)算，設(shè)置計(jì)算后的負(fù)margin值，使兩列元素在同一行顯示。同時(shí)兩列之間的間距由.right的margin值確定。由于右側(cè)元素會(huì)層疊在左側(cè)元素之上，.left需要使用relative來(lái)提升層級(jí)

<style>p{margin: 0;}.parent{overflow: hidden;zoom: 1;}.left{position: relative;float: left;width: 100px;}    .rightWrap{float: left;width: 100%;margin-left: -100px;}.right{margin-left: 120px;}</style>

<div class="parent" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="rightWrap" >
        <div class="right"  >
            <p>right</p>
            <p>right</p>
        </div>        
    </div></div>

【3】float + margin + calc

除了增加結(jié)構(gòu)的方法外，還可以使用calc()

[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加減運(yùn)算

<style>p{margin: 0;}.parent{overflow: hidden;zoom: 1;}.left{float: left;width: 100px;margin-right: 20px;}    .right{float: left;width: calc(100% - 120px);}</style>

<div class="parent" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <p>right</p>
        <p>right</p>
    </div></div>

【4】float + overflow

還可以使用overflow屬性來(lái)觸發(fā)bfc，來(lái)阻止浮動(dòng)造成的文字環(huán)繞效果。由于使用overflow不會(huì)改變?cè)氐膶挾葘傩裕圆恍枰匦略O(shè)置寬度。由于設(shè)置overflow:hidden并不會(huì)觸發(fā)IE6-瀏覽器的haslayout屬性，所以需要設(shè)置zoom:1來(lái)兼容IE6-瀏覽器

<style>p{margin: 0;}.parent{overflow: hidden;zoom: 1;}.left{ float: left;width: 100px;margin-right: 20px;}    .right{overflow: hidden;zoom: 1;}</style>

<div class="parent" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <p>right</p>
        <p>right</p>
    </div></div>

思路2: inline-block

inline-block內(nèi)聯(lián)塊布局的主要缺點(diǎn)是需要設(shè)置垂直對(duì)齊方式vertical-align，則需要處理?yè)Q行符解析成空格的間隙問(wèn)題。IE7-瀏覽器不支持給塊級(jí)元素設(shè)置inline-block屬性，兼容代碼是display:inline;zoom:1;

【1】inline-block + margin + calc

一般來(lái)說(shuō)，要解決inline-block元素之間的間隙問(wèn)題，要在父級(jí)設(shè)置font-size為0，然后在子元素中將font-size設(shè)置為默認(rèn)大小

[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加減運(yùn)算

<style>p{margin: 0;}.parent{font-size: 0;}.left{display:inline-block;vertical-align:top;width:100px;margin-right:20px;font-size:16px;}.right{display:inline-block;vertical-align:top;width:calc(100% - 120px);font-size:16px;}</style>

<div class="parent" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <p>right</p>
        <p>right</p>
    </div></div>

【2】inline-block + margin + (fix)

<style>p{margin: 0;}.parent{font-size: 0;}.left{position:relative;display:inline-block;vertical-align:top;width:100px;font-size:16px;}.rightWrap{display:inline-block;vertical-align:top;width:100%;margin-left: -100px;font-size:16px;}.right{margin-left: 120px;}</style>

<div class="parent" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="rightWrap" >
        <div class="right"  >
            <p>right</p>
            <p>right</p>
        </div>        
    </div></div>

思路3: table

使用table布局的缺點(diǎn)是元素被設(shè)置為table后，內(nèi)容撐開(kāi)寬度，所以需要設(shè)置width:100%。若要兼容IE7-瀏覽器，需要改為<table>結(jié)構(gòu)。由于table-cell元素?zé)o法設(shè)置margin，若需要在元素間設(shè)置間距，需要增加結(jié)構(gòu)

<style>p{margin: 0;}.parent{display:table;width: 100%;table-layout: fixed;}.left,.rightWrap{display:table-cell;}.left{width: 100px;}.right{margin-left: 20px;}</style>

<div class="parent" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="rightWrap" >
        <div class="right"  >
            <p>right</p>
            <p>right</p>
        </div>        
    </div>    </div>

思路4: absolute

absolute布局的缺點(diǎn)是由于父元素需要設(shè)置為relative，且子元素設(shè)置為absolute，所以父元素的高度并不是由子元素?fù)伍_(kāi)的，需要單獨(dú)設(shè)置。

[注意]IE6-不支持相對(duì)的偏移屬性同時(shí)設(shè)置

<style>p{margin: 0;}.parent{position: relative;width:100%;height:40px;}.left{position: absolute;left:0;width:100px;}.right{position: absolute;left:120px;right:0;}</style>

<div class="parent" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <p>right</p>
        <p>right</p>
    </div>        </div>

思路5: flex

flex彈性盒模型是非常強(qiáng)大的布局方式。但由于其性能消耗較大，適合于局部小范圍的布局

[注意]IE9-不支持

<style>p{margin: 0;}.parent{display: flex;}.left{width:100px;margin-right: 20px;}.right{flex:1;}</style>

<div class="parent" >
    <div class="left" >
        <p>left</p>
    </div>
    <div class="right"  >
        <p>right</p>
        <p>right</p>
    </div>        </div>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：兩列布局中單列定寬單列自適應(yīng)布局的5種思路-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://aaarwkj.com/article18/jcpgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、靜態(tài)網(wǎng)站、建站公司、全網(wǎng)營(yíng)銷推廣、App開(kāi)發(fā)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)