1

私は2つの画像を持っています。私の制約は、最初の画像の終わりの後に新しいdivを配置する必要があるということです。しかし、それらは異なる行にあります。私はたくさんグーグルで検索し、float：leftがトリックを行うことを発見しました。

私はすでにそれを使用していますが、それでも彼らは別の行に来ています。私はどこが間違っているのかわかりません。

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>

助けてください。

4

4 に答える 4

2

フロートを親コンテナに適用しません。子要素にfloatを適用します。

#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

divのtopdiv3前に閉じる必要があります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 に答える