两个di"/>
<link href="/style/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<script src="/style/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/style/functions.js" type="text/javascript"></script>
<script src="/style/clist-time.js" type="text/javascript"></script>
</head>
<body>
<header id="indexHeader">
<div class="top_bar">
<div class="heade_m"><div class="refresh_title"></div></div>
<div class="heade_l"><a class="msg-box" href="/"><i class="iconfont icon-shouye-shouye"></i></a></div>
<div class="heade_r"><a href="javascript:;" class="btn search"><i class="iconfont icon-sousuo"></i></a></div>
</div>
<div class="top_menu_bar">
<div id="top_menu" class="top_menu_list" data-type="index" >
<ul class="nav flexy-menu orange">
<li class="navmore"></li>
<li class="hover"><a href="/">首页</a></li>
<li><a href="/zs/">知识</a></li><li><a href="/know/">知道</a></li><li><a href="/tags/yingjian.html" title="硬件" draggable="false" target="_blank">硬件</a></li>
<li><a href="/tags/jiaocheng.html" title="教程" draggable="false" target="_blank">教程</a></li>
<li><a href="/tags/guzhang.html" title="故障" draggable="false" target="_blank">故障</a></li>
<li><a href="/tags/wangluo.html" title="网络" draggable="false" target="_blank">网络</a></li>
<li><a href="/tags/mima.html" title="密码" draggable="false" target="_blank">密码</a></li>
<li><a href="/tags/fuwuqi.html" title="服务器" draggable="false" target="_blank">服务器</a></li>
<li><a href="/tags/fangfa.html" title="方法" draggable="false" target="_blank">方法</a></li>
<li><a href="/tags/gongju.html" title="工具" draggable="false" target="_blank">工具</a></li>
<li><a href="/tags/hanshu.html" title="函数" draggable="false" target="_blank">函数</a></li>
<li><a href="/tags/zhiling.html" title="指令" draggable="false" target="_blank">指令</a></li>
</div>
</div>
<div class="wap-search">
<div class="search-form">
<form action="/e/search/index.php" method="post">
<input type="hidden" value="title,skey" name="show">
<div class="search-select">
<select name="classid">
<option value="1">全部</option>
</select>
</div>
<div class="search-fields">
<input type="text" class="" placeholder="搜索词..." autocomplete="off" value="" name="keyboard" required="">
<button class="" type="submit"><i class="iconfont icon-sousuo"></i></button>
</div>
</form>
</div>
<div class="popula-search-key"><span>热门：</span><a href="/tags/huawei.html" title="华为" draggable="false" target="_blank">华为</a><a href="/tags/zhichi.html" title="支持" draggable="false" target="_blank">支持</a><a href="/tags/canshu.html" title="参数" draggable="false" target="_blank">参数</a><a href="/tags/fenbianshuai.html" title="分辨率" draggable="false" target="_blank">分辨率</a><a href="/tags/jiojuefangfa.html" title="解决方法" draggable="false" target="_blank">解决方法</a><a href="/tags/kongzhi.html" title="控制" draggable="false" target="_blank">控制</a><a href="/tags/shuxing.html" title="属性" draggable="false" target="_blank">属性</a><a href="/tags/qidong.html" title="启动" draggable="false" target="_blank">启动</a><a href="/tags/shengji.html" title="升级" draggable="false" target="_blank">升级</a><a href="/tags/cuowu.html" title="错误" draggable="false" target="_blank">错误</a><a href="/tags/pingtai.html" title="平台" draggable="false" target="_blank">平台</a><a href="/tags/tuijian.html" title="推荐" draggable="false" target="_blank">推荐</a><a href="/tags/buzhou.html" title="步骤" draggable="false" target="_blank">步骤</a><a href="/tags/moshi.html" title="模式" draggable="false" target="_blank">模式</a><a href="/tags/chaxun.html" title="查询" draggable="false" target="_blank">查询</a><a href="/tags/yunxing.html" title="运行" draggable="false" target="_blank">运行</a><a href="/tags/kongjian.html" title="空间" draggable="false" target="_blank">空间</a><a href="/tags/wenjianjia.html" title="文件夹" draggable="false" target="_blank">文件夹</a><a href="/tags/shubiao.html" title="鼠标" draggable="false" target="_blank">鼠标</a><a href="/tags/tubiao.html" title="图标" draggable="false" target="_blank">图标</a><a href="/tags/zhongqi.html" title="重启" draggable="false" target="_blank">重启</a><a href="/tags/jihuo.html" title="激活" draggable="false" target="_blank">激活</a><a href="/tags/lianxiang.html" title="联想" draggable="false" target="_blank">联想</a><a href="/tags/jiancha.html" title="检查" draggable="false" target="_blank">检查</a><a href="/tags/zhuangtai.html" title="状态" draggable="false" target="_blank">状态</a><a href="/tags/yingyongchengxu.html" title="应用程序" draggable="false" target="_blank">应用程序</a></div>
</div>
</header>
<div class="content-wrap">
<div class="content">
<div class="article-container">
<header class="article-header">
<h1 class="article-title">css如何让两个div并排显示？</h1>
<div class="article-meta">
<div class="meta-mus"><span><i class="iconfont icon-shijian"></i><p class="time_27598">2022-10-15 23:34:35</p><script>deal_time(27598,0);</script></span></div>
</div>
</header>
<article id='img' class="article-content">
让两个Div并排显示的方法有很多，使用display的inline属性、通过设置float来让Div并排显示都可以实现，下面我们来看一下css实现两个div并排显示的方法。</p><p><img src="/d/jc/2022092513/50la55bi2rf11.webp"/></p><p>让两个Div并排显示</p><p><strong>一、使用display的inline属性</strong></p><pre class="brush:html;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两个div并排显示</title>
<style type="text/css">
</style>
</head>
<body>
<div style="width:300px; height:auto;border: 1px solid red; display:inline">AAAA</div>
<div style="width:300px; height:auto;border: 1px solid red; display:inline">BBBB</div>
</body>
</html></pre><p>效果如下：<br/></p><p><img src="/d/jc/2022092513/05xswtiku4r11.webp" /></p><p>display 属性规定元素应该生成的框的类型。display:inline样式将元素显示为内联元素，元素前后没有换行符。 </p><p><strong>二、通过设置float来让Div并排显示</strong></p><pre class="brush:html;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两个div并排显示</title>
<style>
div{float:left;border:1px solid red; padding:10px;}
</style>
</head>
<body>
<div> 1111 </div>
<div> 2222
</div>
</body>
</html></pre><p>效果如下：<br/></p><p><img src="/d/jc/2022092513/gacn1tu2woc11.webp" /></p><p>float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。</p><p>如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。</p><p>推荐：<a href="http://127.0.0.1/d/jc/2022091713/3629322komvbiqyet2" target="_blank">css手册</a><p>以上就是css如何让两个div并排显示？的详细内容，更多请关注易知道|edz.cc其它相关文章！</p></article>
<script>
window.onload=function(){
var imgs = document.getElementsByTagName('img');
for(var i = 0;imgs[i];i++){
var thttp = imgs[i].getAttribute('src').indexOf("http");
var tok = imgs[i].getAttribute('src').indexOf("//");
if(thttp == -1 || tok == -1) {imgs[i].setAttribute('src', 'https://www.ezd.cc' + (imgs[i].getAttribute('src') || ''));}
}
}
</script>
<div class="entry-meta">
<div class="articleinfo-tag"><i class="iconfont icon-biaoqian"></i><a href="/tags/xianshi.html" title="显示" class="c1" target="_blank">显示</a><a href="/tags/fangfa.html" title="方法" class="c1" target="_blank">方法</a><a href="/tags/shuxing.html" title="属性" class="c1" target="_blank">属性</a><a href="/tags/shezhi.html" title="设置" class="c1" target="_blank">设置</a><a href="/tags/liangge.html" title="两个" class="c1" target="_blank">两个</a></div>
</div>
</div>
<div class="relatebox">
<div class="relatebox-lists">
<h3>推荐阅读<span></span></h3>
<div class="relatebox-articles">
<ul>
<article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc7O.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030506/x4ysjpxeczi36.webp" alt="win10多任务按键怎么设置在底部详细方法" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc7O.html" title="win10多任务按键怎么设置在底部详细方法">win10多任务按键怎么设置在底部详细方法</a></h2>
</div>
<p class="text-muted meta">win10多任务按键怎么设置在底部详细方法，按键,任务，在使用电脑时候，任务视图按钮被用户们从键盘上不小心的移除了，导致使用起来非常的不方便</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc7J.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/83.webp" alt="怎么设置电脑桌面|怎么设置电脑桌面壁纸" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc7J.html" title="怎么设置电脑桌面|怎么设置电脑桌面壁纸">怎么设置电脑桌面|怎么设置电脑桌面壁纸</a></h2>
</div>
<p class="text-muted meta">怎么设置电脑桌面|怎么设置电脑桌面壁纸，，怎么设置电脑桌面壁纸方法/步骤分步阅读1/7鼠标右键点击桌面，选择个性化选项，进入个性化设置界面</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc71.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/8.webp" alt="中联吊车电脑显示器图解|中联吊车电脑说明书" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc71.html" title="中联吊车电脑显示器图解|中联吊车电脑说明书">中联吊车电脑显示器图解|中联吊车电脑说明</a></h2>
</div>
<p class="text-muted meta">中联吊车电脑显示器图解|中联吊车电脑说明书，，1. 中联吊车电脑说明书低速挡起步，行走后就转换高速挡（往上），换挡时去掉高速挡再换挡（往下），挂完挡</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc7q.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/70.webp" alt="固定路由器如何设置固定无线路由器设置教程" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc7q.html" title="固定路由器如何设置固定无线路由器设置教程">固定路由器如何设置固定无线路由器设置教程</a></h2>
</div>
<p class="text-muted meta">固定路由器如何设置固定无线路由器设置教程，，如今我们的智能手机、平板电脑、笔记本、超级本等等都需要WiFi无线网络的支持，今天小编入手了</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc7j.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/13.webp" alt="如何链接路由器设置TP链接无线路由器设置" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc7j.html" title="如何链接路由器设置TP链接无线路由器设置">如何链接路由器设置TP链接无线路由器设置</a></h2>
</div>
<p class="text-muted meta">如何链接路由器设置TP链接无线路由器设置，，不管是什么品牌的无线路由器，首先第一步都是硬件安装，主要涉及的是将网线将电脑、（俗称猫）以及电脑</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc6Y.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/22.webp" alt="icloud设置哪些该打开|icloud在设置哪里打开" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc6Y.html" title="icloud设置哪些该打开|icloud在设置哪里打开">icloud设置哪些该打开|icloud在设置哪里打</a></h2>
</div>
<p class="text-muted meta">icloud设置哪些该打开|icloud在设置哪里打开，，icloud设置哪些该打开iCloud是苹果公司推出的一款云服务系统，我们可以通过自己的苹果ID进行</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc6U.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/24.webp" alt="酷派手机恢复出厂设置|酷派手机恢复出厂设置后上不了网" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc6U.html" title="酷派手机恢复出厂设置|酷派手机恢复出厂设置后上不了网">酷派手机恢复出厂设置|酷派手机恢复出厂设</a></h2>
</div>
<p class="text-muted meta">酷派手机恢复出厂设置|酷派手机恢复出厂设置后上不了网，，酷派手机恢复出厂设置后上不了网恢复出厂设置后开不了机处理方法： 1、手机彻底</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc6O.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/58.webp" alt="电脑关机后显示器灯还亮|电脑关机后显示器灯还亮着一按键盘就开机是怎么回事" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc6O.html" title="电脑关机后显示器灯还亮|电脑关机后显示器灯还亮着一按键盘就开机是怎么回事">电脑关机后显示器灯还亮|电脑关机后显示器</a></h2>
</div>
<p class="text-muted meta">电脑关机后显示器灯还亮|电脑关机后显示器灯还亮着一按键盘就开机是怎么回事，，1. 电脑关机后显示器灯还亮着一按键盘就开机是怎么回事由于</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc6C.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/97.webp" alt="电脑网页打开页面不全怎么办|电脑网页打开后显示不全" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc6C.html" title="电脑网页打开页面不全怎么办|电脑网页打开后显示不全">电脑网页打开页面不全怎么办|电脑网页打开</a></h2>
</div>
<p class="text-muted meta">电脑网页打开页面不全怎么办|电脑网页打开后显示不全，，1. 电脑网页打开后显示不全网页显示不全的解决方法有：方法一：重新设置IE浏览器（1）点击</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc6B.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/47.webp" alt="设置证书密码是什么|证书初始密码" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc6B.html" title="设置证书密码是什么|证书初始密码">设置证书密码是什么|证书初始密码</a></h2>
</div>
<p class="text-muted meta">设置证书密码是什么|证书初始密码，，设置证书密码是什么证书密码是可以修改的，可以在企业网银上修改，也可以到银行网点修改。到网点修改要带</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc68.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/25.webp" alt="设置里程碑|设置里程碑的方法有哪些" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc68.html" title="设置里程碑|设置里程碑的方法有哪些">设置里程碑|设置里程碑的方法有哪些</a></h2>
</div>
<p class="text-muted meta">设置里程碑|设置里程碑的方法有哪些，，1. 设置里程碑的方法有哪些1、通过挑战风险，突破认知，从而突破自我。只有在某些特殊的时刻，比如想法和</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc6v.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030508/fdzxnfrtcbz49.webp" alt="计算机主板BIOS设置详细-BIOS知识" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc6v.html" title="计算机主板BIOS设置详细-BIOS知识">计算机主板BIOS设置详细-BIOS知识</a></h2>
</div>
<p class="text-muted meta">计算机主板BIOS设置详细-BIOS知识，，什么是电脑BIOS，一般电脑主板已经设置完毕后，电脑就开始按del键进入BIOS。系统启动BIOS，即微机的基本输入</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc6t.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/61.webp" alt="两台电脑屏幕切换|电脑两个屏幕切换" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc6t.html" title="两台电脑屏幕切换|电脑两个屏幕切换">两台电脑屏幕切换|电脑两个屏幕切换</a></h2>
</div>
<p class="text-muted meta">两台电脑屏幕切换|电脑两个屏幕切换，，1. 电脑两个屏幕切换一、电脑自动出现切换用户画面的原因主要是系统设置问题，采用了无操作系统休眠的</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc6k.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030508/5yawfx2gegf05.webp" alt="金蝶k3入如何设置公式|金蝶K3中计量单位该如何设置呢?" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc6k.html" title="金蝶k3入如何设置公式|金蝶K3中计量单位该如何设置呢?">金蝶k3入如何设置公式|金蝶K3中计量单位该</a></h2>
</div>
<p class="text-muted meta">金蝶k3入如何设置公式|金蝶K3中计量单位该如何设置呢?，，1.金蝶K3中计量单位该如何设置呢?1。计量单位组 计量单位组分无换算、浮动换算、</p>
</article><article class="excerpt excerpt-one">
<p class="focuss"><a href="/zs/Lc6c.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/97.webp" alt="苹果电脑麦克风设置|苹果电脑允许麦克风在哪里设置" /></span></a></p>
<div class="title">
<h2><a href="/zs/Lc6c.html" title="苹果电脑麦克风设置|苹果电脑允许麦克风在哪里设置">苹果电脑麦克风设置|苹果电脑允许麦克风在</a></h2>
</div>
<p class="text-muted meta">苹果电脑麦克风设置|苹果电脑允许麦克风在哪里设置，，1. 苹果电脑允许麦克风在哪里设置1、苹果电脑麦克风没声音是接口或是设置的问题。2、</p>
</article></ul>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<p>Copyright © 2023 易知道 ezd.cc All Rights Reserved</p>
<p><a href="https://beian.miit.gov.cn/">京ICP备19020253号-3</a></p>
</footer>
</body>
</html>