blocks|key|2437861|text|您使用的css边框占用1个像素或2个像素，因此将每个边框设置为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2437862|width:+50vh;|code-block|syntax|javascript|2437863|宽度太大了。要么将其设置为49vh，要么取消边界。|2437864|此外，如果您希望2个div彼此相邻浮动，请设置|2437865|float:+left;|2437866|对于这两个div。|2437867|工作示例here|offset|length|2437868|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/cDv2d9ln8yfUkSGVHDKV?p=preview^0|0|0|0|0|0|0|4|4|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>the css border you were using takes up a pixel or 2, so setting each one to</p>

<pre><code>width: 50vh;
</code></pre>

<p>width was too much. either set them to 49vh or get rid of the border.</p>

<p>also, if you want 2 divs floated next to each other, set</p>

<pre><code>float: left;
</code></pre>

<p>for both of the divs.</p>

<p>working example <a href="https://plnkr.co/edit/cDv2d9ln8yfUkSGVHDKV?p=preview" rel="nofollow">here</a></p>


blocks|key|2437941|text|您需要浮动#privset+div并根据框的大小进行调整。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2437942|此外，使用50vw可能会导致问题，因为浏览器对滚动条是否包含在总宽度中有不同的解释。对于跨浏览器支持，请使用50%25。|2437943|​|2437944|*+{
++box-sizing:+border-box;
++margin:+0;
++padding:+0;
}
#usersearch+{
++border-bottom:+medium+solid;
++width:+100%25;
++height:+40vh;
}
#privset+{
++border-right:+medium+solid;
++position:+relative;
++width:+50%25;
++height:+100vh;
++float:+left;
}
#privrules+{
++float:+right;
++position:+relative;
++width:+50%25;
++height:+100vh;
}|code-block|syntax|javascript|2437945|<div+id="usersearch">Customer+Information</div>
<div+id="privset">Priv+set</div>
<div+id="privrules">Priv+rules</div>|2437946|2437947|entityMap^0|5|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Y|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>You need to float the <code>#privset</code> div and adjust for box-sizing.</p>

<p>Also, using 50vw can cause issues as broswers have different intepretations of the whether any scrollbar is included in the overall width. Use 50% instead for cross-browser support.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#usersearch {
  border-bottom: medium solid;
  width: 100%;
  height: 40vh;
}
#privset {
  border-right: medium solid;
  position: relative;
  width: 50%;
  height: 100vh;
  float: left;
}
#privrules {
  float: right;
  position: relative;
  width: 50%;
  height: 100vh;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="usersearch"&gt;Customer Information&lt;/div&gt;
&lt;div id="privset"&gt;Priv set&lt;/div&gt;
&lt;div id="privrules"&gt;Priv rules&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2437958|text|所有并排的元素都应该是浮动的。此外，如果您使用边框和/或填充，则应设置box-sizing:+border-box。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2437959|请参阅此工作示例：https://jsfiddle.net/lewster32/3zb7xgh2/|2437960|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/lewster32/3zb7xgh2/^0|Z|M|0|9|14|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>All elements sitting side by side should be floated. Additionally, if you're using borders and/or padding, <code>box-sizing: border-box</code> should be set.</p>

<p>See this working example: <a href="https://jsfiddle.net/lewster32/3zb7xgh2/" rel="nofollow">https://jsfiddle.net/lewster32/3zb7xgh2/</a></p>


<p>I'm creating a simple admin console consisting of 3 divs. One div (usersearch) extends to the entire width of the page whilst the 2 remaining divs (privset, privrules) must be next to each other 50:50.</p>

<p>Upon loading the page, only one div shows whilst the other is pushed somewhere else.</p>

<pre><code>&lt;style&gt;
body {
padding:0%;
margin:0%;
overflow: hidden;
}

header {
background-color:black;
color:white;
text-align:center;
padding:5px; 
}

#usersearch {

border-bottom: medium solid;
position: relative;
width: 100%;
height: 40vh;
}
#privset{

border-right: medium solid;
position: relative;
width: 50vw;
height: 100vh;

}

#privrules{
float:right;
position: relative;
width: 50vw;
height: 100vh;


}

footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
position: absolute;
bottom:0;
left:0;
right:0;
}
&lt;/style&gt;
</code></pre>

<p>HTML below</p>

<pre><code>&lt;div id="usersearch"&gt;Customer Information&lt;/div&gt;
&lt;div id="privset"&gt;Priv set&lt;/div&gt;
&lt;div id="privrules"&gt;Priv rules&lt;/div&gt;
</code></pre>


How do I position divs next to each other?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在创建一个由3个div组成的简单管理控制台。一个div (usersearch)延伸到整个页面的宽度，而剩下的两个div (privset，privrules)必须彼此相邻50:50。在加载页面时，只显示一个div，而另一个被推送到其他地方。<style>body {padding:0%;margin:0%;ove...

问如何将div放置在彼此相邻的位置？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将div放置在彼此相邻的位置？EN