布局左固定右自適應

2022-04-09 19:19:36 字數 2276 閱讀 4935

存在乙個問題就是當螢幕縮小至一定寬度的時候,邊框欄會被擠開

1body 67

8margin:0 auto;

9 }11

12background-color:#bd9c8c;

13 }

15.header

2324

2526

width:80%;

27margin:0 auto;

28 }

29.main-content

38.sidebar

4651

52clear:both;

53background-color:#bd9c8c;

54 }

55.footer

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charest

="utf-8"

/>

<

title

>test

title

>

<

link

rel="stylesheet"

type

="text/css"

href

="css/test1.css"

>

head

>

<

body

>

<

header

class

>

<

div

class

="header"

>

<

h1>header content

h1>

div>

header

>

<

main

class

="container"

>

<

div

class

>

<

section

class

="main-content"

>

<

h2>

定義預格式化的文字,被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字型,可以導致段落斷開的標籤(例如標題、 和 標籤)絕不能包含在所定義的塊裡,pre 元素中允許的文字可以包括物理樣式和基於內容的樣式變化,還有鏈結、影象和水平分隔線

CSS布局中左(右)寬度自適應,右(左)寬度固定

設定左側寬度為200px,向左浮動 設定右側margin right,為左側盒子寬度 header content left content right footer class header logo div class content class left 固定寬度div class right...

CSS布局 左固定右自適應的幾種方法

實現乙個左右布局,左邊固定寬度200px,右邊自適應寬度。html 固定寬度200px 自適應寬度 css fixed autofloat會脫離正常流的規則,右側的塊級元素會自動向父級元素靠攏,這個時候再設定padding left把內容推出來就可以了。然後說一下這個box sizing這個屬性,當...

二列左列寬度固定,右列寬度自適應布局

左邊固定值,右邊百分比佔完整螢幕的方法。1 用table當然很簡單了,左邊td固定值,右邊100 就ok了 2 div就不知道咋弄了,右邊100 肯定不能float到一行上去了。只好用js判斷瀏覽器的寬度然後減去左邊的寬度。3 不知道有沒有更好的解決辦法。2 xml lang zh cn lang ...