學習網頁製作:像table一樣布局div II

來源:互聯網
上載者:User
網頁

  像table一樣布局div Ⅰ

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Equal height boxes with CSS, part II </title> <style type="text/css" media="screen,print"> /* Layout rules */ .equal { display:table; border-collapse:separate; } .row { display:table-row; } .row div { display:table-cell; } /* Styling rules to make the example look nicer */ html,body { margin:0; padding:0; color:#000; background:#fff; } body { font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; } .equal { margin:10px auto; border-spacing:10px; background:#898B60; width:600px; } .row div { background:#fff; } .row .one { width:200px; } .row .two { width:200px; } .row .three { vertical-align:middle; } .row div h2 { margin:0 0 0.5em 0; padding:0.5em 10px; font-size:1.2em; color:#fff; background:#595B30; } .row div p { font-size:0.94em; margin:0.5em 0; padding:0 10px; } #labfooter { text-align:center; clear:both; } </style><!-- Some rules to make IE/Win display the boxes with variable height. --><!--[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]--></head><body><div class="equal"> <div class="row"> <div class="one"> <h2>This is a box</h2> 這個容器含有較少的內容,但是他的高低卻能和較多內容的容器等高</div> <div class="two"> <h2>This is another box</h2> <p>這個盒子含有比另外一個更多的內容. 如果所有的容易都作為儲存格顯示, 那麼它的高度將是所有容易的高度. 它現在想表格一樣顯示, 但是他不是一個表格.</p> <p>另外, display:table, display:table-row and display:table-cell 使的div顯示出像表格一樣的效果,可是糟糕的是他不能正常運行在你所熟悉的瀏覽器IE上,但是它卻可以順利運行於像 Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape.這些瀏覽器上面.然後IE得到供選擇CSS,規則防止它完全地毀壞這種布局。</p> <p>瞭解更多細節: <a href="http://www.jluvip.com/blog/article.asp?id=149">Equal height boxes with CSS</a>.</p> </div> <div class="three"> <p>這也是個含有較少內容的容器.而且內容是垂直置中顯示的</p> </div> <!--[if IE]> <div class="ieclearer"></div> <![endif]--> </div></div><div id="labfooter"> <a href="http://www.jluvip.com">My blog</a> | 這個翻譯的頁面著作權歸greengnn所有,轉載請註明出處</div></body></html>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Equal height boxes with CSS </title> <style type="text/css" media="screen,print"> /* Layout rules */ .equal { display:table; border-collapse:separate; } .row { display:table-row; } .row div { display:table-cell; } /* Styling rules to make the example look nicer */ html,body { margin:0; padding:0; color:#000; background:#fff; } body { font:90%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; } .equal { margin:10px auto; border-spacing:10px; background:#898B60; width:80%; } .row div { background:#fff; } .row div.one { width:40%; } .row div.two { width:40%; } .row div.three { vertical-align:middle; } .row div h2 { margin:0 0 0.5em 0; padding:0.5em 10px; font-size:1.2em; color:#fff; background:#595B30; } .row div p { font-size:0.94em; margin:0.5em 0; padding:0 10px; } #labfooter { text-align:center; } </style></head><body><div class="equal"> <div class="row"> <div class="one"> <h2>This is a box</h2> <p>這個容器含有較少的內容,但是他的高低卻能和較多內容的容器等高</p> </div> <div class="two"> <h2>This is another box</h2> <p>這個盒子含有比另外一個更多的內容. 如果所有的容易都作為儲存格顯示, 那麼它的高度將是所有容易的高度. 它現在想表格一樣顯示, 但是他不是一個表格.</p> <p>另外, display:table, display:table-row and display:table-cell 使的div顯示出像表格一樣的效果,可是糟糕的是他不能正常運行在你所熟悉的瀏覽器IE上,但是它卻可以順利運行於像 Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape.這些瀏覽器上面</p> <p>瞭解更多細節: <a href="http://www.jluvip.com/blog/article.asp?id=149">Equal height boxes with CSS</a>.</p> </div> <div class="three"> <p>這也是個含有較少內容的容器.而且內容是垂直置中顯示的</p> </div> </div></div><div id="labfooter"> <a href="http://www.jluvip.com">My blog</a> | 這個翻譯的頁面著作權歸greengnn所有,轉載請註明出處</div></body></html>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

<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顯示和別的瀏覽器不同的代碼,對於這個判斷IE\MAC優先選擇顯示其間的內容。

然後在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支援第一個模型,要麼我們可能會想出更好的方案來。但是這次嘗試是有價值的。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。