Question

我有一个包含一系列组件（框）的网页。由于内容是动态的，因此每个组件的高度可能会有所不同。此外，组分应该是流动的（即宽度可以在一定程度上变化）。

问题是我在查看桌面和智能手机的网页时想要“不同的排序”。

Smartphone    Desktop
┌───┐         ┌─────┬───┐
│ A │         │  A  │ B │
│   │         │     ├───┤
├───┤         ├─────┤ C │
│ B │         │  D  ├───┤
├───┤         ├─────┤ E │
│ C │         │  F  │   │
├───┤         ├─────┤   │
│ D │         │  G  ├───┘
├───┤         └─────┘
│ E │        
│   │        
│   │        
├───┤        
│ F │        
├───┤        
│ G │        
└───┘

基本上，当用户查看桌面版本时，我希望将某些组件“浮动”到右侧，将某些组件“浮动”到左侧。我想要移动版本的另一个“订单”。

我尝试过简单的“float：right”和“float：left”结合两种分辨率的媒体查询，但是这导致了布局中的垂直间隙：http://jsfiddle.net/VgG55/10/在{ {3}}

为了实现这一点，应该使用什么样的标记（div，包装等的顺序）以及CSS对于“宽”和“窄”版本的样子？

注意，不能使用诸如this StackOverflow question之类的JS解决方案。这应该是纯HTML / CSS（如果可能的话）。此外，该网站应适用于IE9 +和现代版本的Firefox / Chrome / Safari / Opera。

Answer 1

这是我能想到的最接近的： http://jsfiddle.net/VgG55/11/

请注意，我必须更改div的顺序并将其括起来：

<span class="wide">

Answer 2

我使用单独的<div>为每个列解决了这样的问题

<div class="column col1">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="column col2">
    <div></div>
    <div></div>
    <div></div>
</div>

对于桌面.column { float: left}他们

移动版。他们接连出现了

用于响应式布局的标记和CSS，浮动的div与顶部对齐

2 个答案: