實現一側定寬,一側自適應的布局的方法a 、b
a、利用左側元素浮動,或者絕對定位的方式使其脫離常規文件流
1、利用float和margin來實現
csshtml
張藝興,努力,努力,再努力!努力,努力,再努力!不知道幹什麼,我先乾好自己現在手頭的工作!
瀏覽器(591 x 806)效果圖:
2、利用float和css3中的calc
csshtml
左側定寬
右側自適應
3、利用定位position:absolute和margin來實現
csshtml
4、利用定位position來實現
csshtml
left
right
b、bfc(塊級格式化上下文)bfc就是乙個相對獨立的布局環境,它內部元素的布局不受外面布局的影響
5、float與overflow或者display:flex;
csshtml
left
right
6、display:table來實現
html
左側定寬
右側自適應
效果圖
CSSS實現右側定寬左側自適應
csss實現右側固定寬度,左側自適應,或者左惻固定寬度右側自適應 首先,html結構如下 注意,html中必須使用div標籤,不要妄圖使用p標籤來達到目的。因為div有個預設屬性,即如果不設定寬度,那他會自動填滿他的父標籤的寬度。clearfix after container content在le...
css頁面布局之左側定寬,右側自適應
二列布局的特徵是側欄固定寬度,主欄自適應寬度。三列布局的特徵是兩側兩列固定寬度,中間列自適應寬度。之所以將二列布局和三列布局寫在一起,是因為二列布局可以看做去掉乙個側欄的三列布局,其布局的思想有異曲同工之妙。對於傳統的實現方法,主要討論上圖中前三種布局,經典的帶有側欄的二欄布局以及帶有左右側欄的三欄...
左側固定寬,右側自適應螢幕寬,左右兩列,等高布局
今天有位朋友一早從妙味課堂轉來乙個有關於css布局的面試題,需要解決,花了點時間寫了幾個demo,放上來與大家分享受。那麼我們在看demo之前一起先來看看這個面試題的具體要求吧 左側固定寬,右側自適應螢幕寬 左右兩列,等高布局 左右兩列要求有最小高度,例如 200px 當內容超出200時,會自動以等...