blocks|key|960342|text|在您的css代码中放置如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|960343|.class
{
float:left;
}|code-block|syntax|javascript|960344|还请确保如果将类.second的宽度放置在类.master中，则不应超过50%25，因为这两个div仅包含在类.master的主div中。|offset|length|style|CODE|960345|entityMap^0|0|0|8|7|M|7|1H|7|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

<p>In your css code put this:</p>

<pre><code>.class
{
float:left;
}
</code></pre>

<p>also make sure that if you put the width of that class <code>.second</code>  then it should not exceed 50% as these two divs are only contained in the main div with the class <code>.master</code></p>


blocks|key|86603|text|<div+class="master">+
<div+class="second"+style="float:left">1st</div>
<div+class="second">2nd</div>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|86604|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;div class="master"&gt; 
&lt;div class="second" style="float:left"&gt;1st&lt;/div&gt;
&lt;div class="second"&gt;2nd&lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|2002766|text|加上这个css+-|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2002767|.second+{

++++float:+left;
++++margin-left:+5px;

}|code-block|syntax|javascript|2002768|检查演示|2002769|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/hnx82xgr/^0|4|3|0|0|2|2|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Add this <code>css</code> - </p>

<pre><code>.second {

    float: left;
    margin-left: 5px;

}
</code></pre>

<p>Check the <a href="https://jsfiddle.net/hnx82xgr/" rel="nofollow">DEMO</a></p>


blocks|key|86599|text|如果您使用"float:left“，您必须为浮动的div设置一个宽度(百分比-obviously，它们不能超过100%25-或像素)。另外，您可能希望对容器使用此css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|86600|.container:after+{
++content:+"";
++display:+table;
++clear:+both;
}|code-block|syntax|javascript|86601|关于这一点的更多信息：|86602|如何防止浮动元素的父母崩溃？|offset|length|86603|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing^0|0|0|0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>If you use "float:left" you have to set a width (in percentage -obviously they must not exceed 100%-, or pixels) for the floated divs. Also, you might want to use this css for the container:</p>

<pre><code>.container:after {
  content: "";
  display: table;
  clear: both;
}
</code></pre>

<p>More on this:</p>

<p><a href="https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing">How do you keep parents of floated elements from collapsing?</a></p>


blocks|key|2002837|text|尝试添加display:+inline-block|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2002838|.second+{
++display:+inline-block;
}|code-block|syntax|javascript|2002839|并确保不将任何.second容器的宽度增加到父容器的一半以上。|2002840|entityMap^0|4|L|0|0|7|7|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Try adding <code>display: inline-block</code></p>

<pre><code>.second {
  display: inline-block;
}
</code></pre>

<p>and make sure not to increase the width of any <code>.second</code> container to more than half of the parent</p>


<p>I have 2 divs which i cannot give different class names, due to them being the same but in a repeatable php code, which doesen't allow me to give them different class names.
So i basically want to display them side by side.
I have tried giving them a float left and relative position and a master div surrounding them with absolute position and other things like that, but to no avail.</p>

<p>HTML:</p>

<pre><code>&lt;div class="master"&gt; 
&lt;div class="second"&gt;1st&lt;/div&gt;
&lt;div class="second"&gt;2nd&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS currently applied:</p>

<pre><code>.second{
    color:#FFF;
    width:300px;
    height: 10%;
    background-color:#69F;
    border-radius:25px;
    opacity: 0.7;
    filter: alpha(opacity=40);
    float:left;
}
.master{
width:960px;
padding-top:12%;
margin: 0 auto;
font-size:50px;
}
</code></pre>


Putting 2 divs next to each other with same class

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我有两个div，我不能给出不同的类名，因为它们是相同的，但是在一个可重复的php代码中，这不允许我给它们不同的类名。所以我基本上想把它们并排显示出来。我试过给他们一个浮动的左边和相对位置和一个主div包围他们的绝对位置和其他类似的事情，但没有任何效果。HTML：<div class="master"> <div cla...

问将两个div放在同一个类的相邻位置
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将两个div放在同一个类的相邻位置EN