当窗口变窄时堆叠一个“浮动:右”div
当窗口变窄时堆叠一个“浮动:右”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
复制相关文章
点击加载更多
相似问题
matplotlib绘制错误的图
绘制错误数据值的Matplotlib图
matplotlib图绘制
用matplotlib绘制曲面图时的错误
绘制matplotlib子图
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
