将2个div放在同一行[重复]答案

【问题标题】：Putting 2 divs on the same line [duplicate]将2个div放在同一行[重复]
【发布时间】：2013-02-28 02:30:08
【问题描述】：

更新：我得到了答案...非常感谢布拉德（在 cmets 中）

更新 2：我不知道如何在 cmets 中给出最佳答案

更新3：我给迈克尔最好的答案，因为布拉德爵士没有给出答案是答案部分

我正在努力让 2 个 div 在同一行，但徒劳无功

 <br /><div id='topdiv1'><div id='topdiv3'><div id='div23 '>
<img src="http://i.udm4.com/mac/48/163/163483.png" /></div><span class="tab"></span>
 <img src='http://i.udm4.com/mac/48/163/163483.png'/></div></div>



span.tab{
padding: 0 50px; /* Or desired space*/
}
.div23 
{
display: inline
    float:left;
  }
   .span.tab 
{  
   display: inline
    float:left;
}
   .topdiv1 
  {
   display: inline
float:left;
  }
.topdiv3
  {
        display: inline
          float:left;
   }

我不知道我哪里出错了。请帮助

【问题讨论】：

首先你有语法错误。三次您错过了 display:inline 上的分号。（应该是 display: inline; ）除此之外，您在 HTML 中使用 ID 但在 CSS 中引用类时还有其他语法错误。
其次，您的 div id 为 div#，但您的样式引用了 .div# 的类（this 怎么样？）
非常感谢先生！！顺便说一句......不是“。”用于“id”，#用于“class”
不，你的情况正好相反，这就是你的代码不起作用的原因。您的 div 布局方式也有错误，请参阅我的回答。

标签： html css

【解决方案1】：

您有多个语法错误。

在 HTML 中你有，在 CSS 中你用 .

引用 x

.字符是指一个类，而不是一个 ID。要引用 ID，您需要使用 #。或者您可以将 id="x" 切换为 class="x" 并保留 css。

您的 div 结构也嵌套不正确。下面的代码解决了你的问题。

http://jsfiddle.net/LgADB/4/

<div id='topdiv1'>

<div id='topdiv3'>
    <img src='http://i.udm4.com/mac/48/163/163483.png'/>
</div><!-- end topdiv3 -->

<div id='div23 '>
    <img src="http://i.udm4.com/mac/48/163/163483.png" />
</div><!-- end div23 -->

<span class="tab"></span>
</div><!-- end topdiv1 -->

span.tab{
    padding: 0 50px; /* Or desired space*/
}

#topdiv3 {
    float: left;
}

#div23 {
    float: left;
}

【讨论】：

他指定他需要这样嵌套 div。

【解决方案2】：

<div style="display:inline-block; margin-right:50px"><img src="http://i.udm4.com/mac/48/163/163483.png" /></div>
<div style="display:inline-block;"><img src='http://i.udm4.com/mac/48/163/163483.png'/></div>

或

<div style="float:left; margin-right:50px"><img src="http://i.udm4.com/mac/48/163/163483.png" /></div>
<div style="float:left;"><img src='http://i.udm4.com/mac/48/163/163483.png'/></div>

【讨论】：

实际上我需要一个 div 包装，因为我正在创建一个响应式设计，当屏幕宽度较小时我需要隐藏第一个 div ......非常感谢您的努力。跨度>
嘿，我得到了答案.. 非常感谢jsfiddle.net/LgADB/2

【解决方案3】：

你试过设置宽度吗喜欢

<div>

<div style="float:left;width:10%"><img src='http://i.udm4.com/mac/48/163/163483.png'/></div>
<div style="float:left;width:10%"><img src='http://i.udm4.com/mac/48/163/163483.png'/></div>

</div>

【讨论】：

【解决方案4】：

您可以使用更少的 CSS 获得相同的结果。 This will do the trick，虽然它可能不是您正在寻找的解决方案。

img {
    margin-right:50px;
    float:left;
}

编辑：当然，您需要使img 选择器更具体；否则，您将在页面上设置所有 <img/> 元素。

【讨论】：

他已经有 float:left 了。他的问题不在于规则本身，而在于他到处都有语法错误。
我知道。我只是指出一个使用更少 CSS 的替代解决方案。有时有助于解决问题的方法是意识到可能有更优雅的解决方案。他在一行上要求 2 个 div。当然，考虑到他的代码，看起来他的意思是一行中有两个 img。