浮動div問題移動到一個新行

<div style="float: left"><a href="url" title="title"> 
<img src="/name.png" /></a></div> 
<div style="text-align: right"><img src="/strip.png" /></div>

如何獲取/strip.png移動到/name.png後面，當頁面不夠寬時，在一行上。目前/strip.png進入一個新行。謝謝。浮動div問題移動到一個新行

來源

2013-03-19 user2188643

「在底下移動」和「走向新路線」有什麼區別？ – 2013-03-19 22:50:41

通過移動下面我的意思是推到後面的第一個圖像。 – user2188643 2013-03-19 23:16:48

在什麼瀏覽器中？似乎按預期工作：http://jsfiddle.net/ExplosionPIlls/HLNTC/ – 2013-03-19 23:30:14

如果希望兩個div元素佔據同一空間只能使用絕對定位做到這一點（即有一個在其他的前面）。你也可以用背景來做到這一點，並讓浮動的div是另一個div的孩子，但我認爲這實際上會更復雜。在你的簡單例子中，將float: left更改爲position: absolute就足夠了。

http://jsfiddle.net/ExplosionPIlls/HLNTC/1/

你可能需要做兩個div position: relative所以絕對定位的div起到很好的容器。

來源

2013-03-19 23:34:51

謝謝，這正是我正在尋找的。 – user2188643 2013-03-19 23:39:35

您需要浮動：正確的第二個div。

來源

2013-03-19 22:53:15

'float：left;'也可以工作，並使它們左對齊。我只會使用'float：right;'如果你想讓圖像在新行上正確對齊。 – Ben 2013-03-19 23:20:27

<div style="display: -webkit-flex; 
      display: flex; 
      -webkit-justify-content: space-between; 
      justify-content: space-between; 
      -webkit-flex-flow: row wrap; 
      flex-flow: row wrap;" > 
    <div> 
    <a href="url" title="title"><img src="/name.png" /></a> 
    </div> 
    <div><img src="/strip.png" /></div> 
</div>

http://jsfiddle.net/33XZ4/

來源

2013-03-19 23:28:58

謝謝，但我需要右邊的方塊消失在左邊的方塊後面，當它們不夠寬時，它們在同一條線上。 – user2188643 2013-03-19 23:34:26

浮動div問題移動到一個新行

回答

相關問題