CSS:多個DIV在同一行居中顯示的一種實現方法
阿新 • • 發佈:2018-12-30
在專案開發中,畫面經常有多個DIV的內容顯示在一行的要求。
比如HTML
<div class="div_allinline"> <div class="subdiv_allinline"> 你好,這是div1的第一行。 <br>你好,這是div1的第二行 </div> <div class="subdiv_allinline"> 你好,這是div2的第一行。 </div> <div class="subdiv_allinline"> 你好,這是div3的第一行。 <br>你好,這是div3的第二行 </div> </div>
怎麼居中顯示在一行呢?使用inline-block來做這個處理。
<style type="text/css"> .div_allinline { text-align:center; margin:0 auto; padding:0; clear:both; } .subdiv_allinline { margin:0; padding:0; display:inline-block; _display:inline; *display:inline; zoom:1; } </style>
IE6,IE7中不支援inline-block,所以針對IE6,IE7寫了下面的三個屬性。
_display:inline;
*display:inline;
zoom:1;
這樣貌似就主流的瀏覽器裡面都能夠正常顯示。div的寬度可以根據情況設定。