CSS:多个DIV在同一行居中显示的一种实现方法
2012-04-05 15:03
651 查看
在项目开发中,画面经常有多个DIV的内容显示在一行的要求。
比如HTML
怎么居中显示在一行呢?使用inline-block来做这个处理。
IE6,IE7中不支持inline-block,所以针对IE6,IE7写了下面的三个属性。
_display:inline;
*display:inline;
zoom:1;
这样貌似就主流的浏览器里面都能够正常显示。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的宽度可以根据情况设置。
相关文章推荐
- CSS:多个DIV在同一行居中显示的一种实现方法
- div+css垂直居中的五种实现方法
- js+CSS实现弹出居中背景半透明div层的方法
- CSS让2个DIV在同一行显示的解决方法
- css实现div的水平垂直居中方法
- CSS 实现某一个div居中显示
- CSS实现新闻标题,一行文字垂直居中,两行文字超出显示省略号
- CSS 图片在DIV中垂直居中的显示方法
- css实现一行居中显示,两行靠左显示
- 纯CSS实现文字一行居中,多行左对齐的方法
- CSS中position:fixed实现div居中及div内元素实现居中的方法
- 【转】Div+CSS教程:实现div容器水平居中的方法小结
- CSS实现同一行的图片和文字垂直居中对齐的方法
- js+CSS实现弹出居中背景半透明div层的方法
- CSS+DIV 完美实现垂直居中的方法
- CSS控制文本的长度 超过一行显示省略号的实现方法
- Div和CSS实现页面水平居中的方法
- CSS在页面布局中实现div垂直居中的方法总结(转)
- css实现文字竖直排列 并且在div中居中显示
- css实现多个盒子在一行显示的方法