在HTML中，如何让两个DIV在同一行显示?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在HTML中，如何让两个DIV在同一行显示?相关的知识，希望对你有一定的参考价值。
<div>
<div>a</div>
<div>b</div>
</div>
显示结果为：
a
b
如何让显示结果为
ab
？
把两个div放在一个父div里面，然后进行浮动即可。
下面我们一起来实现以下：
创建一个父div，然后创建两个子div，代码如下：
给div加上css样式，分别给他们设置背景颜色，父div可以不设置，子div设置绿色，然后给div加上浮动代码即可,"float:left"我们来写一下代码：
下面我们来看一下运行效果
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为html（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。
在HTML中，让两个div在同一行显示的方法：
1、使用浮动float
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div同行显示</title>
<style type="text/css">
#containeroverflow: hidden;/* 清除浮动 */
#container divwidth:200px;height:100px;
.box1background: red;float: left;
.box2background: green;float:left;
</style>
</head>
<body>
<div id ="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>
效果：
2、inline-block将这两个div变成内联-块状元素
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div同行显示</title>
<style type="text/css">
bodybackground: #ddd;
divwidth:200px;height:100px;display: inline-block;
.box3background: #e4007e;
.box4background: blue;
</style>
</head>
<body>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>
效果：
在HTML中，让两个DIV在同一行显示的方法是：
1、在html页面新建一个新的html页面。
2、在html代码页面上创建的两个div标签添加class类，假设class类分别为：one，two。
创建div代码如下：
<div class="one">第一个div</div>。
<div class="two">第二个div</div>。
3、创建<style>标签中的class类one，two样式。
css样式代码如下：
<style>
.one,.two
width: 50%;
height: 300px;
border:1px solid #ccc;
float: left;
box-sizing: border-box;
</style>
4、设置好class类属性后，保存html代码，然后使用浏览器打开，即可看到两个div标签显示在同一列上。
<html>
<head>
<title>DIV的同行测试</title>
</head>
<body>
<div>
<div style='flaot:left; width:330px; height:200px;'>
<p>我是左边的固定测试文字</p>
</div>
<div style='flaot:left; width:330px; height:200px;'>
<p>我是右边的固定测试文字</p>
</div>
</div>
</body>
</html> 参考技术D <div>
<div style="float:left">左边的第一个层</div>
<div style="float:left">并排的层</div>
</div>
===================
<div>
<div style="float:left">a</div>
<div style="float:left">b</div>
</div>
笑喷本回答被提问者采纳
为啥我做的两个div层总是不能在同一行中显示，总是显示成两行？
参考技术A 用一个容器包住2个div~~.aawidth:100px;
.bbfloat:left;width:50px;
.ccmargin-left;50px;
<div class="aa">
<div class="bb">11</div>
<div class="cc">22</div>
</div>本回答被提问者采纳
以上是关于在HTML中，如何让两个DIV在同一行显示?的主要内容，如果未能解决你的问题，请参考以下文章