这个问题一直困扰着我。我在右上角有两段文字和一张与第 1 段相关的图片。
如果屏幕很宽，则段落 1 和 2 位于图像旁边时应该如下所示。 (图像是固定大小的。)
当屏幕变窄时，我希望它像这样堆叠:
这是我目前所拥有的，当窗口很窄时无法正确堆叠。图片堆叠在第 1 段之前，而不是之后。
<html>
<head>
<style>
#one { background-color: #CFF; }
#two { background-color: #FCF; width: 400px; height: 300px; }
#three { background-color: #FFC; }
@media (min-width: 600px) {
#two { float: right; }
}
</style>
</head>
<body>
<div id="two">Image</div>
<div id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisi augue, fringilla vel facilisis non, elementum pulvinar dolor. Fusce egestas suscipit dolor vitae tempus. In consectetur quam ante, vel pharetra diam pharetra id. Phasellus a volutpat justo. Suspendisse commodo tincidunt nunc, at ullamcorper massa auctor ac.</div>
<div id="three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nisi augue, fringilla vel facilisis non, elementum pulvinar dolor. Fusce egestas suscipit dolor vitae tempus. In consectetur quam ante, vel pharetra diam pharetra id. Phasellus a volutpat justo. Suspendisse commodo tincidunt nunc, at ullamcorper massa auctor ac.</div>
</body>
</html>
最佳答案
您可以使用显示属性。 使用 table-xx-group 可以控制 e 元素的位置。
表格行组:
#one{
display:table-row-group;
}
#content2{
display:table-header-group;
}
#content2 {
display:table-footer-group;
}
参见 Demo在 js-fiddle 上。
IE7 及更早版本不支持值“table-column-group”、“table-header-group”和“table-footer-group”。 IE8 需要 !DOCTYPE。
关于html - 当窗口变窄时堆叠 "float: right"div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33415064/