两个DIV如何浮动在一行?
发布网友
发布时间：2022-04-06 13:02
共7个回答
热心网友
时间：2022-04-06 14:31
1、打开html开发软件，在html开发工具上新建一个html页面，用于实现多个div显示在同一行上。
2、在html代码页面上创建两个div标签，然后给这个两个div标签添加class类，创建div代码：<div class="one">第一个div</div>、<div class="two">第二个div</div>。
3、创建<style>标签，设置class类one，two样式。需要设置宽、高、浮动、边框以及box-sizing属性。
css样式代码：
<style>
.one,.two{
width: 50%;
height: 300px;
border:1px solid #ccc;
float: left;
box-sizing: border-box;
}
</style>
4、最后，设置好class类属性后，保存html代码，然后使用浏览器打开，即可看到两个div标签显示在同一列上，这样就可以解决两个DIV如何浮动在一行。
热心网友
时间：2022-04-06 15:49
1、打开html开发软件，在html开发工具上新建一个html页面，用于实现多个div显示在同一行上。
2、在html代码页面上创建两个div标签，然后给这个两个div标签添加class类，案例中class类分别为：one，two。创建div代码：<div class="one">第一个div</div><div class="two">第二个div</div>。
3、创建<style>标签，设置class类one，two样式。需要设置宽、高、浮动、边框以及box-sizing属性。
4、设置好class类属性后，保存html代码，然后使用浏览器打开，即可看到两个div标签显示在同一列上。
热心网友
时间：2022-04-06 17:24
</div>
<div style=”white-space:normal;background:#9ff022;”>
afsafasasd fsaf dfs fdas asfdsa ad afdfasdffffaaaaaaaaaaaaaaaaaaaaaaaaadasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
<!–
<div style=”font-size:0px; line-height:0px; clear:both;”>
</div>
–>
</div>方法二，如果右边的div知道width的话， 两个都用float:left就行了，内容和位置都不会重合，而且两个div再同一行上
<div style=”position:absolute;left:200px;top:300px;height:1000px;width:300px;display:inline;”><div style=”float:left;position:relative;width:100px;background:#990022; “>afafdadfas, ssssssssssss
</div>
<div style=”white-space:normal;float:left;background:#9ff022;width:100px;”>
afsafasasd fsaf dfs fdas asfdsa ad afdfasdffffaaaaaaaaaaaaaaaaaaaaaaaaadasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div><div style=”font-size:0px; line-height:0px; clear:both;”>
</div></div>方法三，设置右边的div的top为负值， left大于等于左边div的宽度 ，这个方法比较猥琐，并且必须知道左边div的width，不太推荐。
热心网友
时间：2022-04-06 19:15
floate属性可以使多个块状元素并列一行。
对前面的div元素设置浮动属性后，当前面的div元素留有足够的空白宽度时，后面的div元素将自动浮上来，和前面的div元素并列于一行。
floate属性值有如下取值：
1、left:块状元素向左移动；
2、right:块状元素向右移动；
3、none:块状元素不会浮动；
4、inherit:继承父容器的值；
具体实例如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0px;
padding:0px;
}
#one {
width: 125px;
background-color: #eee;
height: 120px;
border: 1px solid #000000;
float:left;
}
#two {
width: 200px;
background-color: #eee;
height: 120px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id="one">第一div</div>
<div id="two">第二个div</div>
</body>
</html>
热心网友
时间：2022-04-06 21:23
热心网友
时间：2022-04-06 23:48
热心网友
时间：2022-04-07 02:29
