將2張圖片放在同一行

Question

我有2張圖片。我的約束是我必須在第一張圖片結束後放置一個新的div。但它們出現在不同的行上。我搜索了很多並發現float：左手訣竅

我已經在使用它，但它們仍然在不同的行中。我不知道我哪裏出錯了。

Jsfiddle

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

HTML

<br /> 
<div id='topdiv1'><div id="widget1" class="sticky1"> 
<div id='topdiv3'> 
     <a href="http://jlkjlkj.org"> <img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" /></a> 
      <div id='div23'> 

    <span class="tab"></span> 
    <img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/> 
</div> </div> 

請幫助。

Answer 1

您不會將float應用於父容器。您應用浮子子元素：

#topdiv3 > * { 
    float:left; 
} 

http://jsfiddle.net/samliew/b9TWE/1/

如果你想刪除的圖像之間的空間，刪除span。

Answer 2

http://jsfiddle.net/b9TWE/2/這個修復它，你只需要擁有<a>包含第一圖像浮動

#topdiv3 > a{ 
    float: left; 
} 

More on how floats work (great article)

浮動第一<a>包含圖像您從常規文檔流中移除。包含秒圖像的<div>將恢復正常流動並將其本身定位在<a>

Answer 3

您的topdiv3必須在div div23之前關閉。

<div id='topdiv1'> 
<div id="widget1" class="sticky1"> 

    <div id='topdiv3'> 
      <a href="http://jlkjlkj.org"> <img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" /></a> 
    </div> 
    <div id='div23'> 
     <img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/> 
    </div> 
</div> 
</div> 

http://jsfiddle.net/arunu/8gvvr/

Answer 4

我已經測試了Firefox和它的工作你的方式。

但無論如何，你的html標記有點混亂，不是嗎？