頁面左右布局

例如:現有乙個頁面，需要左側200px,右側自適應頁面寬度。

頁面**如下：

import react,

from
'react'
;import styles from
'./csslayout.less'
;export
default
class
csslayout
extends
component
render()
>
>左側選單<
/div>
>右側內容<
/div>
<
/div>)}
}下面提供幾種布局方式：
.layoutbox 
.rightlayout 
&:after 
}

這種方式是calc計算和float結合的結果，需要注意的是必須清除浮動，避免浮動影響其他內容展示。另外less中的calc寫法有點特殊，這是由於less的計算方式與calc相衝突導致的。

.layoutbox 

.rightlayout 
}

該模式下需要設定z-index: 10;,防止右側空出的頁面遮擋左側選單。

.layoutbox 

.rightlayout 
}

這裡左側選單設定flex-shrink: 0;是為了防止父元素縮放影響到子元素。

/*float+padding*/

.layoutbox 
.rightlayout 
&:after 
}

這裡右側布局設定padding-left: 200px;是為了防止左側脫離了正常文件流的選單影響內容顯示。這種方式是利用了html文件流布局的方式，float會使元素脫離文件流，懸浮於正常文件流之上。

當然了,這裡只是乙個簡單的定式布局例子，只是為了讓大家了解一下常用的布局思路，不要被侷限了，實際上還有其他的布局方式，這裡就不一一枚舉了。實際應用中更多用到的是響應式布局，大家利用這些思維模式就能很快的找到適合自己的布局方式了。

div左右布局

一 左右定寬布局 在css分別指定了左右兩列的寬度的情況下，只需要將左邊的div 向左浮動，右邊的div 向右浮動，並清除浮動，即可實現。常用的清除浮動有兩種方式 a 通過在浮動元素的父級元素上新增清除浮動的class類 clearfix 見下面的css 部分 b 通過在浮動元素後面新增乙個空元素，...

CSS布局 四 左右布局

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

右邊自適應 左右布局 css左右自適應布局

如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先，我想到的有這麼幾種display，乙個是inline block。於是css就變成這樣1.name...