人人澡人人爽超碰在线,91蝌蚪大屁股人妻,无码中文字幕AⅤ精品影院

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

兩列布局中單列定寬單列自適應布局的5種思路-創(chuàng)新互聯(lián)

思路一: float

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

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

【1】float + margin

將定寬的一列使用float，而自適應的一列使用計算后的margin

兩列布局中單列定寬單列自適應布局的5種思路


    
        left

right

兩列布局中單列定寬單列自適應布局的5種思路

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

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

【2】float + margin + (fix)

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

兩列布局中單列定寬單列自適應布局的5種思路


    
        left

right

兩列布局中單列定寬單列自適應布局的5種思路

【3】float + margin + calc

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

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

兩列布局中單列定寬單列自適應布局的5種思路


    
        left

right

日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

新聞中心

思路一: float

思路2: inline-block

思路3: table

思路4: absolute

思路5: flex

其他資訊