Question

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

如果屏幕很宽，它应该如下所示，其中第1和第2段位于图像旁边。（图像是固定大小。）

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

这是我到目前为止在窗口狭窄时没有正确堆叠的东西。图像在第1段之前堆叠，而不是在第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元素的位置。

表列基团：

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

请参阅js-fiddle上的Demo。

值＆＃34; table-column-group＆＃34;，＆＃34; table-header-group＆＃34;和＆＃34;桌脚组＆＃34; IE7及更早版本不支持。 IE8需要一个！DOCTYPE。

堆叠＆＃34;浮动：正确＆＃34;窗口变窄时的div

1 个答案: