CSS布局的一些小經驗

2020-03-24 18:09:25

字體：大中小

來源：轉載

供稿：網友

1.在一個div內嵌套兩個div.
div id="1"
div id="2" /div
div id="3" /div
/div css
#1 { width:100%;background:blue;}
#2 { width:100%;background:red;}
#3 { width:100%;background:green;}當div2,3里面沒有異常的內容的時候，顯示一切正常，但是當Div3里放一個超過屏幕寬度的圖片時，div1會自動擴展，但是div2不會。這就使得顯示很難看。如果用表格，div2和div3分別是兩個tr，那么不存在這個問題。
這個問題怎么解決？2. 左中右三個div
div id="left " /div
div id="right " /div
div id="center " /div css
#left {float:left; position:relative; width:200px; left:0px;background: red;}
#right {float:right; position:relative; width:200px; right:0px;background: green;}#center{margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;background: blue;}
這是一個很簡單的左右側固定中間自適應布局。
但是同樣，你在center div里放一個超大的圖片，看看會怎么樣？中間一片白，centerdiv被擠到下面去了
用table,一行3個td就解決了這個問題。右側的td會被擠到屏幕外面，但是總體布局不會亂用div+css布局的確好，我減少了我的網站至少60%的html。
但是div在自適應和異常處理上面，我沒找到好的的方法。當然，有的人可能說，為什么要放一個超大的圖片？我的回答是，這是用戶輸入。我是做程序出身，對于軟件來說，你永遠也想象不到用戶會輸入什么樣的數據.....所以我們的軟件/頁面的容錯性必須要好。Table，就我目前看來，在容錯這個問題上，遠好于div
希望有高人能解決我這個問題。
在這個問題上，我希望達到的效果就是，當中間列超寬的時候，能把右列擠到屏幕以外去，但仍然保持水平的布局關系，不要錯開。問題3：高度的自適應
還是三列（或兩列）的布局。在不考慮有什么超大的圖片的情況下。是比較容易實現寬度自適應的布局的。但是如果左/中/右的背景色不一樣怎么辦？如何實現看起來各欄的高度是一樣的？當然，有解決方法，我會，但是，如果不是背景色，是垂直平鋪的背景圖片怎么辦？如何實現三欄（或兩欄）的背景高度看起來是一致的？請別討論在后臺怎么處理的問題了，我想知道的就是，這幾個問題，在不用表格布局的前提下，用Div+CSS能不能實現，而且至少要保證IE+FF的兼容性（可以是不同的CSS文件）。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：用CSS控制瀏覽器滾動條樣式源代碼

下一篇：CSS教程：數字和字母將容器撐大問題解決