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

html-css024

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的属性设置宽度来使图片同一行排列。