窗口變窄時堆疊「float：right」div

這個問題一直困擾着我。我有兩段文字和一段與右上角浮動的段落有關的圖片。窗口變窄時堆疊「float：right」div

如果屏幕很寬，它應該看起來像第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>

來源

2015-10-29 BlokeTech

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

錶行集團：

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

查看JS-小提琴Demo。

IE7及更早版本不支持值「table-column-group」，「table-header-group」和「table-footer-group」。 IE8需要！DOCTYPE。

來源

2015-10-29 13:54:38 Christoph

這看起來很有希望。讓我再測試一下，回到你身邊！ – BlokeTech

經過一些更多的測試後，我可以確認它是否按預期工作。這也是迄今爲止我看到的最簡潔的答案。 – BlokeTech

窗口變窄時堆疊「float：right」div

回答

相關問題