浮動元素的排序

我遇到了浮動元素的問題，我不太明白。顯示問題比解釋更容易，所以我創建了兩個示例來演示輸出如何根據您放置浮動元素的順序而不同。浮動元素的排序

實施例＃1

HTML：

<body> 
    <div class="float-right"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate metus velit, at mattis orci consectetur sit amet. Etiam tellus risus, ornare at tellus sit amet, suscipit aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue odio non massa vehicula convallis. Nullam maximus diam eu lectus pellentesque, et imperdiet erat fringilla.</p> 
    </div> 
    <figure> 
     <img src="http://imageserver.moviepilot.com/watch-teenage-mutant-ninja-turtles-season-2-episode-16-online-the-lonely-mutation-of-baxter-stockman-threatens-to-mutate-april-is-the-new-n.webp?width=640&height=479" title="TMNT!" alt="TMNT 90's logo" /> 
     <figcaption>TMNT logo from the 90's</figcaption> 
    </figure> 
</body>

CSS

div { 
    width: 300px; 
} 
img { 
    height: 200px; 
    width: 200px; 
} 
.float-right { 
    float: right; 
} 
figure { 
    height: 200px; 
    width: 200px; 
    border: 1px solid black; 
}

輸出：http://jsfiddle.net/4yw8ga68/3/embedded/result/

這裏包含段落一個div浮動權。該div後面跟着一個包含圖像和標題的圖形元素。在輸出中，您可以看到div完全浮動到右側，結果，圖像位於頁面的左上角。

實施例＃2

HTML：

<body> 
    <figure> 
     <img src="http://imageserver.moviepilot.com/watch-teenage-mutant-ninja-turtles-season-2-episode-16-online-the-lonely-mutation-of-baxter-stockman-threatens-to-mutate-april-is-the-new-n.webp?width=640&height=479" title="TMNT!" alt="TMNT 90's logo" /> 
     <figcaption>TMNT logo from the 90's</figcaption> 
    </figure> 
    <div class="float-right"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate metus velit, at mattis orci consectetur sit amet. Etiam tellus risus, ornare at tellus sit amet, suscipit aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed congue odio non massa vehicula convallis. Nullam maximus diam eu lectus pellentesque, et imperdiet erat fringilla.</p> 
    </div> 
</body>

CSS

div { 
    width: 300px; 
} 
img { 
    height: 200px; 
    width: 200px; 
} 
.float-right { 
    float: right; 
} 
figure { 
    height: 200px; 
    width: 200px; 
    border: 1px solid black; 
}

輸出：http://jsfiddle.net/4yw8ga68/5/embedded/result/

該代碼是相同的第一，只有浮動DIV放置之後的形象和形象。在這個例子中，div看起來漂浮在右邊，但由於圖像而下降。

我的問題是，爲什麼在第二個例子中輸出不同？我期望輸出與第一個例子相同，考慮到圖像和圖形只有200px寬，浮動的div仍然有很大的空間可以一直浮動到頁面的右側和頂部。

任何幫助將不勝感激。謝謝！

來源

2014-11-05 Tom

這是因爲當第一個元素被浮動時，然後在它填充空間後的任何元素。

然而，如果只有第二個元素被浮動，那麼它對第一個元素沒有任何影響，因爲它不會在第二個元素之後出現。

如果要實現與第一代碼相同的效果，但保持你的第二個HTML結構，那麼你就需要一個float屬性添加到<figure>元素，例如：

figure { 
    height: 200px; 
    width: 200px; 
    border: 1px solid black; 
    float: left; 
}

這裏是一個的jsfiddle ：http://jsfiddle.net/4yw8ga68/6/

來源

2014-11-05 01:21:39

浮動元素的排序

回答

相關問題