浮动元素的排序

我遇到了浮动元素的问题，我不太明白。显示问题比解释更容易，所以我创建了两个示例来演示输出如何根据您放置浮动元素的顺序而不同。浮动元素的排序

实施例＃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

浮动元素的排序

回答

相关问题