Вводя 2 изображения в той же строке

Question

У меня есть 2 изображения. Мое ограничение состоит в том, что я должен положить новый div после окончания 1-го изображения. Но они появляются на разных линиях. Я много гугл и обнаружил, что 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

Вы не применяете поплавок к родительскому контейнеру. Вы применяете поплавок дочерних элементов:

#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

Я проверил его на светлячок, и она работала так, как вы сделали.

Но так или иначе, ваша разметка html немного путается, не так ли?