CSS布局樣式 左右布局，左邊定寬，右邊自適應

2021-08-04 19:13:34 字數 1342 閱讀 2601

1.display：table width:100% 和 diplay : table-cell



tabletitle>


head>


#wrap


.sidebar


.content


style>


id="wrap">


class="sidebar">sidebardiv>


class="content">contentdiv>


div>


body>


html>
2：float 單一層浮動法

例如：左側固定成100px; 則核心** 左側：width:100px;float:left; 右側 width:auto;margin-left:100px;

例項：



charset="utf-8">


z-indextitle>


type="text/css">*  


.container


.left


.right


style>


head>


class="container">


class="left">


div>


class="right">


div>


div>


body>


html>
3.定位 ，在固定元素上加入絕對定位，自適應元素設定成margin-left:固定元素的寬度



charset="utf-8">


z-indextitle>


type="text/css">*  


.container


.left


.right


style>


head>


class="container">


class="left">leftdiv>


class="right">rightdiv>


div>


body>


html>
4.左邊設定左浮動，右邊寬度設定100%

.left


.right
5. 父容器設定 display：flex；right部分設定 flex：1

.container


.left


.right

左右布局 左邊定寬 右邊自適應

要求 不少於三種方法 所有方案 父元素的寬度為單位為 absolute padding left right 小結 父元素設定padding left是給左邊元素預留空間，左邊元素絕對定位到該位置。flex，未來趨勢，推薦 left right 小結 flow屬性為flow grow,flow sh...

CSS布局 四 左右布局

左邊固定，右邊自適應的兩欄布局。基本樣式 高度有可能會很小，也可能很大。這裡的內容可能比左側高，也可能比左側低。寬度需要自適應。基本的樣式是，兩個div相距20px,左側div寬 120px padding 15px 20px border 1px dashed ff6c60 left right ...

左右定寬，中間自適應三欄布局

三欄布局 左右定寬，中間自適應 方法一 聖杯布局 box1 main1,left1,right1 main1 left1 right1main left right 原理 中間塊元素必須排列在左右元素之前，全部左浮動並且相對於自身進行定位。給父元素乙個左右等於左右元素的padding，就可將左右塊的...