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

html-css031

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

实现两个DIV盒子并排，一行只显示两列DIV布局，使用width宽度+float浮动即可实现一行显示两列DIV布局。

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=utf-8" /> 

<title>两个DIV并排</title> 

<style> 

.div-a{ float:leftwidth:49%border:1px solid #F00} 

.div-b{ float:leftwidth:49%border:1px solid #000} 

</style> 

</head> 

<body> 

<div class="div-a">第一个DIV盒子</div> 

<div class="div-b">第二个DIV盒子</div> 

</body> 

</html>

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

图片并排列

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

方法1：将ID为infoOutput里面的<div>设置行内样式。<div>本身是一个块元素，本来就占据一行，此时应将<div>设为行内元素即可。

#infoOutput div { display: inline-block}

方法2：建议将ID为infoOutput里面的<div>改为更为语义化的<span>元素。