1

我有 2 张图片。我的限制是我必须在第一张图片结束后放置一个新的 div。但是它们出现在不同的行上。我用谷歌搜索了很多，发现 float:left 可以解决问题

我已经在使用它，但它们仍然以不同的方式出现。我不知道我哪里出错了。

提琴手

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>

请帮忙。

4

4 回答 4

2

您不会将浮动应用到父容器。您将浮动应用于子元素：

#topdiv3 > * {
    float:left;
}

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

如果要删除图像之间的空间，请删除span.

于 2013-03-01T04:50:05.297 回答
1

http://jsfiddle.net/b9TWE/2/这修复了它，你只需要让<a>包含第一个图像浮动

#topdiv3 > a{
    float: left;
}

更多关于花车是如何工作的（很棒的文章）

通过浮动第一个<a>包含图像的图像，您可以将其从常规文档流中删除。包含<div>秒图像将恢复正常流程并将其自身定位在<a>

于 2013-03-01T04:53:34.920 回答
1

您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/

于 2013-03-01T04:53:37.157 回答
0

我已经在 Firefox 上对其进行了测试，它的工作方式与您一样。

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

于 2013-03-01T04:54:04.640 回答