当 window 变窄时堆叠 "float: right" div

Question

这个问题一直困扰着我。我在右上角有两段文字和一张与第 1 段相关的图片。

如果屏幕很宽，图片旁边的第 1 段和第 2 段应该是这样的。（图片为固定尺寸。）

当屏幕变窄时，我希望它像这样堆叠：

这是我目前所拥有的，当 window 较窄时无法正确堆叠。图片堆叠在第 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>

Answer 1

您可以使用显示属性。使用 table-xx-group 可以控制 e 元素的位置。

table-行组：

#one{
   display:table-row-group;
}
#content2{
    display:table-header-group;   
}
#content2 {
    display:table-footer-group;   
}

参见 js-Demo-fiddle。

IE7 及更早版本不支持值 "table-column-group"、"table-header-group" 和 "table-footer-group"。 IE8 需要 !DOCTYPE.

当 window 变窄时堆叠 "float: right" div

Stacking a "float: right" div when window becomes narrow

html

css

media-queries

responsive-design