html布局,下面怎么使两个div在同一行显示?

html-css06

html布局,下面怎么使两个div在同一行显示?,第1张

两种常用方法:

<p class="p_left">左左左左左左左</p><p class="p_right">右右右右右右右</p>。

一、

.p_left{float:left}。

.p_right{float:left}。

二、(中间如果有空格 他会留空格的 上面的就不会,你要块状也可以换成display:inline-block)。

.p_left{display:inline;}。

.p_right{display:inline}。

在界面设计的时候,经常需要将两个div在同一行显示。

如以下要将“第一个div”和“第二个div”显示在同一行:

<div id="id1">  /*外层div*/

<div id="id2" style="width:100pxheight:20px">第一个div</div>

<div id="id3" style="width:100pxheight:20px">第二个div</div>

</div>

只需要对id2和id3增加css样式即可,如下所示:

<div id="id1">  /*外层div*/

<div id="id2" style="width:100pxheight:20pxfloat:left">第一个div</div>

<div id="id3" style="width:100pxheight:20pxfloat:left">第二个div</div>

</div>

这样就可以了。

亲,这个答案是可以的,不过有一点需要说明的是,两张图片家里来的宽度不能超过设定的页面宽度,比如说你的页面宽度为980像素,那么你的两张图片的宽度就不能超过980,否则就不能。

图片并排列

需要补充的是如果图片超出了最大的范围,可以使用img的属性设置宽度来使图片同一行排列。