Question

Here is a fiddle基本上我想要做的事情 - 使用浮动重新排序div，在较小的屏幕尺寸上将中间div浮动到左侧，将外部的两个放在右侧。

这是当前的订单：

<div id='one'></div>
<div id='two'></div>
<div id='three'></div>

除了已经存在的内容之外，我希望外部两个div位于左侧中间div的下方。基本上我希望它看起来像：

<div id='two'></div>
<div id='one'></div>
<div id='three'></div>

div 2显示：block，显示一个/三个显示：inline-block - 而不更改html 。

这只能用CSS吗？

Answer 1

可以这样做：

<div class="boxes"> 
    <div class="one box">Box One</div> 
    <div class="two box">Box Two</div> 
    <div class="three box">Box Three</div> 
    <div class="four box">Box Four</div> 
</div>

CSS：

@media only screen and (max-width:768px) { 
    .boxes {  
    display:table; 
    width:100%; 
} 
.box { 
    display:block; 
    width:100%; 
} 
    .three { display:table-caption; } 
    .four { display:table-header-group; } 
    .one { display:table-footer-group; } 
}

来源：http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table（查看演示链接）

使用换行符

1 个答案: