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

我无法弄清楚我哪里出错了.plz help

Answer 1

您有多种语法错误。

在HTML中你有和在CSS中使用。

重新生成x

。字符是指一个类，而不是一个ID。要引用ID，您需要使用＃。或者你可以切换id =＆＃34; x＆＃34; to class =＆＃34; x＆＃34;然后单独留下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实现相同的结果。 This will do the trick，虽然它可能不是您正在寻找的解决方案。

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

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

将2个div放在同一行

4 个答案: