4

我正在研究一个包含三列的响应式设计。对于 700 像素以下的屏幕尺寸，通过将所有列宽设置为 100%，这些列会按照它们在 HTML 中出现的顺序跳到彼此之上：div1、div2 然后 div3。

我将如何设置 div 在媒体查询中以不同的顺序显示？

div 基于流体十二列网格，具有窄的左右列和宽的中央列。它们都向左浮动，因此按标记顺序显示。但中间栏包含主要内容，左右栏包含辅助信息。因此，一旦我的布局移动到单列，我希望左右 div 显示在中央 div 下方。我接近这个错误吗？

这是标记...

<div class="container">
  <div class="row">
    <div class="threecol">
      <p>Column 1</p>
    </div>
    <div class="sixcol">
      <p>Column 3</p>
    </div>
    <div class="threecol last">
      <p>Column 3</p>
    </div>
  /div>
</div>

.row {
width: 100%;
max-width: 1140px;
min-width: 701px;
margin: 0 auto;
overflow: hidden;
}

.threecol, .fourcol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}

.row .threecol {
width: 22.05%;
}

.row .fourcol {
width: 30.75%;
}

.last {
margin-right: 0px;
}

@media handheld, only screen and (max-width: 700px) {

.row, body, .container {
width: 100%;
min-width: 0;
}

.row .threecol, .row .fourcol {
width: auto;
float: none;
}

}
4

2 回答 2

10

我现在找到了解决方案。

我使用enquire.js在 javascript 中模拟媒体查询，然后使用 jQuery .insertBefore( )和.insertAfter()来切换 div 的顺序。

这是一种享受。

这是代码：

<div class="container">
    <div class="row">
        <div class="threecol" id="tertiary-col">
            <p>Column 1</p>
        </div>
        <div class="sixcol" id="main-col">
            <p>Column 3</p>
        </div>
        <div class="threecol last" id="secondary-col">
            <p>Column 3</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    enquire.register("screen and (max-width:850px)", {
        match : function() { 
                $('#tertiary-col').insertAfter('#secondary-col');
        },
        unmatch : function() {
                $('#tertiary-col').insertBefore('#main-col');
        }
    }).listen();
</script>
于 2012-10-25T14:20:55.933 回答
-1

将来，您会想要使用Flexbox，这非常适合。但是，它没有得到可靠的支持，所以我知道的最佳选择是使用appendAround jQuery 插件将左列移动到基于媒体查询的不同容器 div。

于 2012-10-22T23:17:44.043 回答