兩列布局(一列定寬）

MonoLog 發布于2019-08-29 18:34 / 2839人閱讀

摘要：左列定寬需要定寬負值部分在這個地方進行了添加，使用把原有結構包裹住了需要定寬父元素定寬高第一種，同時可以實現等高布局設置列之間的間距第二種方法

左列定寬 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 負值 + 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 父元素定寬高

//第一種，同時可以實現等高布局


    
        
             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;
}

云服務器 GPU云服務器兩列數據合并成一列某題左列定寬右列某兩列字符 html ul 兩列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114417.html

頁面布局解決方案

摘要：頁面布局解決方案居中布局水平居中子元素相對于父元素居中且子元素寬度可變。優點兼容性好支持，以下版本需要調整頁面結構至優點絕對定位脫離文檔流，不會對后續元素的布局造成影響。下面列出了兩種布局方案，草案并不穩定，瀏覽器支持也并不理想。頁面布局解決方案居中布局水平居中子元素相對于父元素居中且子元素寬度可變。除了另外聲明，HTML結構為以下內容： Demo inline-...

XiNGRZ 2019-08-29 13:03 評論0 收藏0
CSS多列布局

摘要：優點加速渲染，實現布局優先缺點代碼量大，復雜加速渲染，實現布局優先優點結構簡單缺點兼容性差，性能不好，常用作小范圍布局多列定寬一列自適應大家來看看想要達到的效果其實只是在上面的布局上，中間再加入一個。轉自個人博客需要注意的是：本篇文章的布局，都未對父元素進行清除浮動的操作，所以在有一些使用了float的布局中，需要在parent容器清除浮動，才能在實際情況下使用。（清除浮動的方...

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

摘要：因為端和移動端布局差異較大，所以我將兩端布局分開講，本文章將針對端的布局進行講解，以下代碼只寫關鍵代碼。為了提高網頁性能，考慮到，表格元素盡量少用，有其他選擇的情況盡量用其他布局。前言此文章是解剖CSS布局原理的續集，之前那篇文章講的都是理論，本文章講具體的實例，根據自己對布局的理解與開發經驗分為以下幾類。因為PC端和移動端布局差異較大，所以我將兩端布局分開講，本文章將針對P...

zhangxiangliang 2019-08-29 13:55 評論0 收藏0
前端面試重點之——多列布局

摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。在頁面開發中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。目錄一、定寬+...

lei___ 2019-08-02 15:33 評論0 收藏0
前端面試重點之——多列布局

摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。在頁面開發中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。目錄一、定寬+...

superPershing 2019-08-23 18:40 評論0 收藏0