html - 将 2 个 div 放在同一行

Question

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

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

更新 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;
   }

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

Answer 1

您有多个语法错误。

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

这 。字符是指一个类，而不是一个 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;
}

Answer 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>

Answer 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>

Answer 4

你可以用更少的 CSS 实现相同的结果。这可以解决问题，尽管它可能不是您正在寻找的解决方案。

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

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