css两个div并排？怎么让两个div并列

编程之家2026-06-30742次浏览

大家好，今天给各位分享css两个div并排的一些知识，其中也会对怎么让两个div并列进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

<style>

.cheshi1{width:500px;height:100px;float:left;}

.cheshi2{width:600px;height:100px;float:left;}

</style>

<bodystyle="width:1000px;height:400px;">

<divclass="cheshi1">111111111</div>

<divclass="cheshi1">1111111</div>

<divclass="cheshi2">222222222</div>

<divclass="cheshi2">22222222</div>

</body>以上代码为例,cheshi1控制的div就可以并排显示， cheshi2的div不能并排显示，只能换行显示。

float:left;定义div的浮动，当这两个或者更多的div都是float:left;时，那么它们就会在父元素的框内顺序从左到右排列，而当它们的宽度和大于父元素的宽度时，那么多余出来的div会被挤换行。

cheshi2就是明显被挤换行的例子。

定义div的浮动有很多，大多用float:left;（向左）或者float:right;（向右）只要控制好div的浮动和父元素与子元素的宽度，就不会出现被迫换行的情况。

并排的话，你需要使用CSS的float属性，然后在设置浮动；

比如

</div>

这样，这个两个DIV标签就在同一行上了（同时靠左），当然有个前提，就是他们俩的父元素的宽度要至少大于400px，这样才能在同一行上。这个结果是两个DIV的右侧会空出100PX的空白

</div>

以上写法，也是在同一行。不同的是，一个靠左，一个靠右。

这里边的两个DIV的中间有100PX的空白。

1、我先做的是插入两个div标签，点击【插入】，找到【布局对象】—【Div标签】。

2、先创建第一个长宽均为200px的div标签，类命名为“1”。

3、在创建第二个长宽均为200px的div标签，类命名为“2”。

4、这时候可以看到两个div标签的状态是上下并排。

5、然后再双击右边的CSS样式窗口内其中一个标签的CSS。

6、在div标签的CSS窗口中分类选项中，找到【方框】，设置Float为left，即向左浮动。

7、最后完成就完成了并排。

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！