css 并排放置两个div

article/2025/11/6 14:10:26

写代码时遇到了并排放置两个div的需求，于是总结了一下，有以下几种方法可以实现：

（1）设置浮动：

a）两个div都设置为左浮动：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>放置两个div在同一行</title><style>.left_div {color: #ffffff;background-color: #159F5D;padding:15px 10px;font-size:30px;width: 200px;height: 100px;}.right_div {color: #000000;background-color: #DC5347;padding:15px 10px;font-size:30px;width: 200px;height: 100px;}</style>
</head>
<body><!-- 设置浮动 --><div><div class="left_div" style="float: left;">First div</div><div class="right_div" style="float: left;">Second div</div></div>
</body>
</html>

b）也可以把一个设置为左浮动，一个设置为右浮动：
在这里插入图片描述

<div><div class="left_div" style="float: left;">First div</div><div class="right_div" style="float: right;">Second div</div></div>

注意：设置 div为float之后，如果没有清除浮动，则下一个被设置 float 的 div 会根据上一个 float 的 div 的布局进行排版，而下一个没设置 float 属性的 div 则是根据它的前一个元素进行排版。

（2）设置为行内元素：
在这里插入图片描述

<div><div class="left_div" style="display: inline;">first div</div><div class="right_div" style="display: inline;">second div</div>
</div>

（3）table实现：
在这里插入图片描述

<table style="margin: 0px;padding: 0px;"><td style="margin: 0px;padding: 0px;"><div class="left_div">First div</div></td><td style="margin: 0px;padding: 0px;"><div class="right_div">Second div</div></td>
</table>