兩列布局(一列定寬）

MonoLog 發(fā)布于2019-08-29 18:34 / 2842人閱讀

摘要：左列定寬需要定寬負(fù)值部分在這個(gè)地方進(jìn)行了添加，使用把原有結(jié)構(gòu)包裹住了需要定寬父元素定寬高第一種，同時(shí)可以實(shí)現(xiàn)等高布局設(shè)置列之間的間距第二種方法

左列定寬 float +margin

absolute + margin

.parent{
        position: relative;
    }

    .side{
         position:absolute;
        width:300px;
        top:0px;
        left:0px;
        background:#F00;
    }

    .main{
        background:#0FC;
        margin-left:300px;
    }

margin-left 負(fù)值 + float


    
        left
    
    
    
        
            right
            right
        
    


.left{
    float: left; width: 100px;
    position: relative; 
}
.right-fix{
    float: right; width: 100%;
    margin-left: -100px;
}
.right{
    margin-left: 120px;
}

BFC

table 父元素定寬高

//第一種，同時(shí)可以實(shí)現(xiàn)等高布局


    
        
             left
        
        
             right
             right
        
    


//第二種方法


    
        
             
                 left
             
        
        
             right
             right

flex


     
     


.parent{
    display: flex;
}

.side{
    width: 200px;
    height: 200px;
    margin-right: 10px;
    background: #555;
}

.main{
    flex: 1;
    background: #ffffd;
}

云服務(wù)器 GPU云服務(wù)器兩列數(shù)據(jù)合并成一列某題左列定寬右列某兩列字符 html ul 兩列

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114417.html

相關(guān)文章

頁(yè)面布局解決方案

摘要：頁(yè)面布局解決方案居中布局水平居中子元素相對(duì)于父元素居中且子元素寬度可變。優(yōu)點(diǎn)兼容性好支持，以下版本需要調(diào)整頁(yè)面結(jié)構(gòu)至優(yōu)點(diǎn)絕對(duì)定位脫離文檔流，不會(huì)對(duì)后續(xù)元素的布局造成影響。下面列出了兩種布局方案，草案并不穩(wěn)定，瀏覽器支持也并不理想。頁(yè)面布局解決方案居中布局水平居中子元素相對(duì)于父元素居中且子元素寬度可變。除了另外聲明，HTML結(jié)構(gòu)為以下內(nèi)容： Demo inline-...

XiNGRZ 2019-08-29 13:03 評(píng)論0 收藏0
CSS多列布局

摘要：優(yōu)點(diǎn)加速渲染，實(shí)現(xiàn)布局優(yōu)先缺點(diǎn)代碼量大，復(fù)雜加速渲染，實(shí)現(xiàn)布局優(yōu)先優(yōu)點(diǎn)結(jié)構(gòu)簡(jiǎn)單缺點(diǎn)兼容性差，性能不好，常用作小范圍布局多列定寬一列自適應(yīng)大家來(lái)看看想要達(dá)到的效果其實(shí)只是在上面的布局上，中間再加入一個(gè)。轉(zhuǎn)自個(gè)人博客需要注意的是：本篇文章的布局，都未對(duì)父元素進(jìn)行清除浮動(dòng)的操作，所以在有一些使用了float的布局中，需要在parent容器清除浮動(dòng)，才能在實(shí)際情況下使用。（清除浮動(dòng)的方...

binta 2019-08-28 18:29 評(píng)論0 收藏0
PC端CSS布局匯總

摘要：因?yàn)槎撕鸵苿?dòng)端布局差異較大，所以我將兩端布局分開(kāi)講，本文章將針對(duì)端的布局進(jìn)行講解，以下代碼只寫(xiě)關(guān)鍵代碼。為了提高網(wǎng)頁(yè)性能，考慮到，表格元素盡量少用，有其他選擇的情況盡量用其他布局。前言此文章是解剖CSS布局原理的續(xù)集，之前那篇文章講的都是理論，本文章講具體的實(shí)例，根據(jù)自己對(duì)布局的理解與開(kāi)發(fā)經(jīng)驗(yàn)分為以下幾類。因?yàn)镻C端和移動(dòng)端布局差異較大，所以我將兩端布局分開(kāi)講，本文章將針對(duì)P...

zhangxiangliang 2019-08-29 13:55 評(píng)論0 收藏0
前端面試重點(diǎn)之——多列布局

摘要：重點(diǎn)以需求為例說(shuō)明。三左邊不定寬，右邊自適應(yīng)布局需求左側(cè)不定寬，右側(cè)自適應(yīng)，間距。五等寬布局解決方案需求多列等寬，并保留間距。在頁(yè)面開(kāi)發(fā)中，當(dāng)我們拿到設(shè)計(jì)師給出的UI圖后，首先考慮的就是布局問(wèn)題，而多列布局會(huì)是我們碰到最多的布局問(wèn)題，個(gè)人就匯總了開(kāi)發(fā)中常見(jiàn)多列布局問(wèn)題的解決方法。按列數(shù)可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。目錄一、定寬+...

lei___ 2019-08-02 15:33 評(píng)論0 收藏0
前端面試重點(diǎn)之——多列布局

摘要：重點(diǎn)以需求為例說(shuō)明。三左邊不定寬，右邊自適應(yīng)布局需求左側(cè)不定寬，右側(cè)自適應(yīng)，間距。五等寬布局解決方案需求多列等寬，并保留間距。在頁(yè)面開(kāi)發(fā)中，當(dāng)我們拿到設(shè)計(jì)師給出的UI圖后，首先考慮的就是布局問(wèn)題，而多列布局會(huì)是我們碰到最多的布局問(wèn)題，個(gè)人就匯總了開(kāi)發(fā)中常見(jiàn)多列布局問(wèn)題的解決方法。按列數(shù)可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。目錄一、定寬+...

superPershing 2019-08-23 18:40 評(píng)論0 收藏0