div+css 如何横向排列，要求横向排两个。超过两个就自动换行！

Question

div+css 如何横向排列，要求横向排两个。超过两个就自动换行！

Answer 1

1.一般情况，默认的div是写一个换一行，所以每一个div都是新的一行，div默认的display属性是block，把display换成inline就不会换新行了
<div
style="display:inline;">XXX</div>
<div
style="display:inline;">XXXX</div>
2.使用float:right属性。float做为CSS中的一个属性定义元素向哪个方向浮动。float:right 文本或图像会移至父元素中的右侧。 如下的代码，这里注意一下float属性必须配合width使用，不然的话float属性不起作用
<td class="bg10">
<div style="width:120px;
float:right;">阅读次数：9999</div>
<div style="width:200px;
float:right;">发表日期：2009-09-10</div>
</td>
.bg10
{
background-image:url(../images/news_r6_c4.jpg);
height:24px;
line-height:24px;
color:#939393;
}

Answer 2

把两个div
float:left；
然后两个Div就会横向排列，要是想排两个就换行，可以在两个div的外面包一个大的Div,宽度设为两个div宽度的总和，超过两个就自动换行

Answer 3

.div-inline{ display:inline}
<div class="div-inline">第一个div盒子</div>
<div class="div-inline">第二个盒子</div>
<div class="div-inline">第三个盒子</div>

Answer 4

<div width="100%">
<div style="float:left;width:50%"></div>
<div style="float:right;width:50%"></div>
<div style="clear:both"></div>
</div>