如何让两个div并排同行显示

首先：把这两个div写在html代码中，如下代码所示。
<div class="content">第一个div</div>
<div class="content">第二个div</div>
其次：再css样式里面对这两个div控制，让其左浮动，或者右浮动，根据自己需要调整。下面给出例子，div的高是253px，宽是280px，让其两个左浮动，这样两个div就并排在一行了。
content {
height: 253px;
width: 280px;
float: left;
}
最后，考虑到div的布局不规整，可以用一个大的div对其加以控制，可以写成这样，这样就可以了。
<div>
<div class="content">第一个div</div>
<div class="content">第二个div</div>
</div>

分类: 电脑/网络 >> 程序设计 >> 其他编程语言
问题描述:

我写了段CSS，但是左边的和右边的是在同一行，但右边的跑下边一行了，请教了

CSS代码 ---------------------------------

#icon_left {

height: 72px;
width: 60px;

font-family: Verdana, Arial, Helvetica, sans-serif, "宋体";

font-size: 12px;

font-weight: normal;

text-align: center;

line-height: 20px;

float: left;

}

#icon_middle {

height: 72px;

width: 60px;

font-family: Verdana, Arial, Helvetica, sans-serif, "宋体";

font-size: 12px;

font-weight: normal;

text-align: center;

line-height: 20px;

margin-right: auto;

margin-left: auto;

}

#icon_right {

height: 72px;

width: 60px;

font-family: Verdana, Arial, Helvetica, sans-serif, "宋体";

font-size: 12px;

font-weight: normal;

text-align: center;

line-height: 20px;

float: right;

}

DIV代码 -----------------------------------

<div id="icon_left"><img src=images/icon1gif /><br />

战略&秘籍</div>

<div id="icon_middle"><img src=images/icon1gif /><br />

地图下载</div>

<div id="icon_right"><img src=images/icon1gif /><br />

任务下载</div>

解析:

试验了很久没搞出来，估计是float这个属性在块的行分布的计算上存在BUG，你看看这篇文章：
sace/members/persons/lpj/blog/CSS%2CFloat%2C01/

其中有一段：

“如果居左的浮动被放置在其容器的左上脚，并且其后跟随一个同向的浮动，该浮动会被放置在容器右上脚，然后移动到左侧，边界延伸到第一个浮动的右侧时停止。”

“最后的一种行为让我们创建整行的floats，每个都被放置在前一个的右侧（或者左侧，如果使用{float:right;}) 同样，当一行中没有足够的空间时，多出来的floats绕到下一行，非常像行内元素那样。这对于制作可点击的图像“简略图”非常方便，因为矩阵会自动调整到屏幕的尺寸，只是简单地在需要时进行回绕。”

似乎说明了你的要求无法实现的原因……

如果你坚持采用这样的页面布局，可以考虑用表格，用表格要快的多了……

哈，参考了这篇文章:
ziyihome/bbs/dispbbsboardid=13&id=498&page=1

搞出来了，你得把处于中间的那个块在代码中放在最后面……

---