Question

我有2张图片。我的约束是我必须在第一张图片结束后放一个新的div。但是它们出现在不同的行上。我搜索了很多，发现浮动：左边有诀窍

我已经在使用它，但它们仍然存在不同的路线。我不知道我哪里出错了。

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

我已经在firefox上测试了它，它的工作方式与你一样。

但无论如何，你的html标记有点混乱，不是吗？

将2张图像放在同一行

4 个答案: