CSS技巧!像table一樣布局div

2022-04-15 23:39:45 字數 1071 閱讀 1455

下面是我翻譯的內容,是根據我對文章的理解意譯的,你就別挑**翻譯的不對了,我的目的只是傳達這個css技巧

先看看xhtml的結構:

很簡單不用解釋就能看懂,但是這裡給出乙個table的結構,是不是很相似

下來是css:

.equal

.row

.row div

.row .one

.row .two

.row .three

解釋:1.dispaly:table;讓層.equal作為塊級元素的**table顯示,也就是將他作為乙個**

2.border-collapse:separate;邊框獨立,就像**沒有合併單元格以前

3.display:table-row;將.row作為**行tr顯示

4.display:table-cell;將.row的下級div作為**單元格td顯示

5.然後定義寬度

這裡還使用了 border-spacing:10px;來區別幾個盒子,正如上面所陳述的,ie下不能正常顯示,但是在:mozilla 1.6, opera 7.50, safari 1.2.2, firefox 0.8, omniweb 5b, camino 0.8b, and netscape 7.1經過測試均可以完美顯示.

上面的問題就是,這個模型對ie來說等同於垃圾,所以基本只能是做來玩玩而已,沒有什麼實際的用處,現在我要做的就是,讓它也能在ie下更好的顯示,所以我又做了第二個模型

xhtml結構類似第乙個模型 的只是增加乙個新的div給ie

給xhtml增加乙個判斷,判斷是否為ie,然後給ie乙個特殊待遇,在ie顯示和別的瀏覽器不同的**,對於這個判斷ie\mac優先選擇顯示其間的內容。

然後在css中也增加乙個判斷,配合xhtml,用浮動對齊(浮動對齊就不用解釋了)的方式來實現容器的等高併排放置,但是還是無法真實的實現等高,你可以採用新增背景顏色的視覺錯覺來實現視覺上的等高,或者採用別的方法,這裡就不進行說明了。

下面是css中的**

到此,整個設計真正的完成了,雖然不夠完美,對非ie而做出努力顯得有點多餘,現在要麼ie支援第乙個模型,要麼我們可能會想出更好的方案來。但是這次嘗試是有價值的。

像外行一樣思考,像專家一樣實踐

像外行一樣思考,像專家一樣實踐,不只是說說而已。題記 看了試讀的章節有些日子,看完了試讀部分,其中一部分是能和我共鳴,還有一部分觀點,自己也比較贊成,但貌似又有些抽象。我想,書不單是用來讀的,讀一本好書,就像吃肉一樣,吸收書中的營養,把營養轉換為自己的血液,直到骨髓中,成為生命中的一部分。像外行一樣...

《像外行一樣思考,像專家一樣實踐》

這本書是在看 暗時間 時收集到的,書的副標題是科研成功之道,自己是個資訊工作者,也號稱科研工作者,雖然經常忙著一些雜活,沒有時間認真思考和做實驗。但從中找點立項 研究 演講 總結的經驗也是有益的。這本書的目錄比較有特點,竟然佔了12頁,基本上看了目錄也能了解了書的主要思想和內容。專家由於他受固有思想...

像黑客一樣思考,像安全專家一樣做事

用不同的視角看待問題,安全威脅也會不同。我們在對應用系統進行安全構建時也是如此。雖然,我們有通用的漏洞列表和其他以最佳實踐形式存在的指導材料可供參考,然而,要真正保護我們的軟體,我們需要從黑客的視角對應用程式進行認真考慮,然後以安全專家的身份去解決其中的問題。一 像黑客一樣思考 1 黑客要對我們進行...