css 并排放置两个div

写代码时遇到了并排放置两个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>

参考链接:
https://www.cnblogs.com/unixart/p/10808393.html
http://www.divcss5.com/wenji/w472.shtml

评论 1 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:终极编程指南 设计师:CSDN官方博客 返回首页

打赏作者

*且听风吟

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值