当窗口变窄时堆叠一个“浮动:右”div
提问于 2015-10-29 05:04:31
这个问题一直困扰着我。我有两段文字和一张与第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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-10-29 05:54:38
您可以使用Display-属性。使用表-xx-组，您可以控制e元素的位置。
表-行组：
#one{
display:table-row-group;
}
#content2{
display:table-header-group;
}
#content2 {
display:table-footer-group;
}见演示关于js-小提琴。
IE7和更早版本中不支持“表列组”、“表标头组”和“表页脚组”的值。IE8需要一个！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33415064
复制相关文章
![1、后端项目框架搭建 [木字楠博客]](https://ask.qcloudimg.com/http-save/yehe-10157340/da6ebb15fa8d88623d1f1085d5b2bcb1.png)
点击加载更多
腾讯云开发者
