实现两个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>
在HTML中，让两个DIV在同一行显示,就是通过float属性来设置的，可以通过设置3个div，然后第一个div包裹住其他2个div，然后在设置宽高就可以了，提交一段代码：
<html>
<head>
<title>DIV的同行测试</title>
</head>
<body>
<div>
<div style='flaot:leftwidth:330pxheight:200px'>
<p>左边的固定测试文字</p>
</div>
<div style='flaot:leftwidth:330pxheight:200px'>
<p>右边的固定测试文字</p>
</div>
</div>
</body>
</html>
超文本标记语言， 标准通用标记语言下的一个应用。“ 超文本 ”就是指页面内可以包含图片、 链接，甚至音乐、 程序等非文字元素。超文本标记语言的结构包括 “头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的 具体内容。
方法1：将ID为infoOutput里面的<div>设置行内样式。<div>本身是一个块元素，本来就占据一行，此时应将<div>设为行内元素即可。#infoOutput div { display: inline-block}
方法2：建议将ID为infoOutput里面的<div>改为更为语义化的<span>元素。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）