转自:http://blog.csdn.net/hantiannan/article/details/7428566
在项目开发中,画面经常有多个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的宽度可以根据情况设置。