在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)的内容提供结构和背景的元素。

温馨提示:内容为网友见解,仅供参考
第1个回答  2018-06-17

在HTML中,让两个div在同一行显示的方法:

1、使用浮动float

代码:

<html>

<head>

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

<title>div同行显示</title>

<style type="text/css">

#container{overflow: hidden;}/* 清除浮动 */

#container div{width:200px;height:100px;}

.box1{background: red;float: left;}

.box2{background: 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">

body{background: #ddd;}

div{width:200px;height:100px;display: inline-block;}

.box3{background: #e4007e;}

.box4{background: blue;}

</style>

</head>

<body>

<div  class="box3">box3</div>

<div  class="box4">box4</div>

</body>

</html>

效果:

本回答被网友采纳
第2个回答  2018-05-23

在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标签显示在同一列上。

第3个回答  推荐于2017-09-29
在HTML中,让两个DIV在同一行显示,就是通过float属性来设置的,我们可以通过设置3个div,然后第一个div包裹住其他2个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>
第4个回答  推荐于2017-09-07
<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>

笑喷本回答被提问者采纳
相似回答