[轉自blueidea]像table一樣佈局divII
翻譯自:Equal height boxes with CSS part II
原文:
http://www.456bereastreet.com/archive/200406/equal_height
_boxes_with_css_part_ii/
下面是我翻譯的內容,是根據我對文章的理解意譯的,你就別挑哪裡翻譯的不對了,我的目的只是傳達這個CSS技巧
上一篇的問題就是,這個模型對IE來說等同於垃圾,所以基本只能是做來玩玩而已,沒有什麼實際的用處,現在我要做的就是,
讓它也能在IE下更好的顯示,所以我又做了 第二個模型
xhtml結構類似 第一個模型 的只是增加一個新的div給IE
<div class=”equal”>
<div class=”row”>
<div class=”one”></div>
<div class=”two”></div>
<div class=”three”></div>
<!–[if IE]>
<div class=”ieclearer”></div>
<![endif]–>
</div>
</div>
給xhtml增加一個判斷,判斷是否為IE,然後給IE一個特殊待遇,在IE顯示和別的瀏覽器不同的程式碼,對於這個判斷IEMAC優先選擇顯示其間的內容。
然後在CSS中也增加一個判斷,配合xhtml,用浮動對齊(浮動對齊就不用解釋了)的方式來實現容器的等高並排放置,但是還是無法真實的實現等高,你可以採用新增背景顏色的視覺錯覺來實現視覺上的等高,或者採用別的方法,這裡就不進行說明了。下面是CSS中的程式碼
<!–[if IE]>
<style type=”text/css” media=”all”>
.equal, .row {
display:block;
}
.row {
padding:10px;
}
.row div {
display:block;
float:left;
margin:0;
}
.row .two {
margin-left:10px;
}
.row .three {
width:160px;
float:right;
}
.ieclearer {
float:none;
clear:both;
height:0;
padding:0;
font-size: 2px;
line-height:0;
}
</style>
<![endif]–>
到此,整個設計真正的完成了,雖然不夠完美,對非IE而做出努力顯得有點多餘,現在要麼IE支援第一個模型,要麼我們可能會想出更好的方案來。但是這次嘗試是有價值的。
經典論壇討論:
http://bbs.blueidea.com/thread-2459988-1-1.html
相關文章
- 像ConstraintLayout一樣分解你的佈局AI
- display:table-cell自適應佈局
- display:table佈局總結
- CSS佈局 --- 自適應佈局CSS
- 也許table佈局專為form表單佈局而生?ORM
- 三欄佈局之自適應佈局
- 像Windows 一樣地查詢 (轉)Windows
- 三列自適應佈局(聖盃佈局)
- Flutter 佈局(九)- Flow、Table、Wrap詳解Flutter
- HTML使用div和table進行佈局HTML
- css自適應佈局CSS
- 【OC梳理】自動佈局
- rem自適應佈局REM
- AutoLayer自動佈局流程
- Masonry自動佈局使用
- css佈局之左側固定右側自適應佈局CSS
- flex佈局——轉載Flex
- 一列居中寬度自適應佈局
- 不一樣的vue實戰(3): 佈局與元件Vue元件
- 使用 CSS columns 佈局來實現自動分組佈局CSS
- Flutter你竟是這樣的佈局Flutter
- CSS3(三)佈局樣式CSSS3
- 登陸頁面樣式佈局
- css經典佈局系列一——垂直居中佈局CSS
- 電信網路拓撲圖自動佈局之曲線佈局
- iOS自動佈局——Masonry詳解iOS
- iPhone 6的自適應佈局iPhone
- RN中佈局樣式的寫法
- vue前端自適應佈局,一步到位所有自適應Vue前端
- CSS佈局 --- 居中佈局CSS
- css佈局-float佈局CSS
- flex一欄寬度固定一欄寬度自適應佈局Flex
- CSS:玩轉grid佈局CSS
- 網頁版面的佈局 (轉)網頁
- 如何實現兩欄佈局,右側自適應?三欄佈局中間自適應呢?
- WPF基礎—佈局,樣式,觸發器觸發器
- 兩列自適應佈局方案整理
- 三列寬度自適應佈局