CSS浮动，更改移动布局上的顺序？ [英] CSS floats, change order on mobile layout?
问题描述
我有一个常规布局，看起来像这样：
这个布局使用CSS浮动。
当我切换到手机时，我想要我的布局： / p>
>
也就是说，我希望我的侧栏 内容。我可以这样做使用绝对定位，但我想知道，有没有办法使用浮动，这样，如果我的内容更改侧边栏将调整高度差？
这里是我怎么做。 DIVs浮动在您的桌面版本上，但是显示在移动设备上的互相之上（默认块显示）。
CSS：
#sidebar {
float：left;
width：30％;
}
#content {
float：right;
width：70％;
}
.mobile #sidebar，
.mobile #content {
float：none;
display：block;
margin-bottom：15px;
}
标准HTML：
< body>
< div id =content>
...
< / div>
< div id =sidebar>
...
< / div>
< / body>
移动HTML：
< body class =mobile>
< div id =content>
...
< / div>
< div id =sidebar>
...
< / div>
< / body>
I have a regular layout that looks that this:
This layout is done using CSS floats.
When I switch to mobile, I want my layout to do this:
That is, I want my sidebar to be below the content. I can do this using absolute positioning, but I was wondering, is there a way to do this using floats so that if my content changes the sidebar will adjust for the height difference?
Here's how I would do it. The DIVs are floated on your desktop version, but displayed on top of eachother (default block display) on mobile.
CSS:
#sidebar {
float: left;
width: 30%;
}
#content {
float: right;
width: 70%;
}
.mobile #sidebar,
.mobile #content {
float: none;
display: block;
margin-bottom: 15px;
}
Standard HTML:
<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
Mobile HTML:
<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>
这篇关于CSS浮动，更改移动布局上的顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
