Question

我有一个页面，其中包含2列新闻文章，这些文章垂直显示在页面下方。请注意，两列的样式都不同。例如。 A列的宽度与B列的宽度不同。

A1 B1
A2 B2
A3 B3
|  | 
An Bn

两列都是div。我已经对网站进行了编码响应，这样当您将浏览器窗口调整为较小的宽度时，整个B列会在A列下移动。

A1
A2
A3
| 
An
B1
B2
B3
|
Bn

从2列到折叠的1列的整个转移现在看起来很好。但是，就用户希望看到的内容而言，它并不是很有用。 B栏顶部的一些文章比A底部的文章更重要。我更希望展示如下内容：

A1
B1
A2
B2
A3
B3
|
An
Bn

实现这一目标的最佳方法是什么？我几乎觉得我必须根据屏幕宽度操纵DOM，把文章放在正确的位置，但我不想这样做。

我的HTML摘录：

<div id="body" class="clearfix">
    <div id="primaryArticleBlock">
        <div id="article1"></div>
        <div id="article2"></div> 
        <div id="article3"></div>                      
    </div>
    <div id="secondaryArticleBlock">
        <div id="article4"></div>
        <div id="article5"></div>
        <div id="article6"></div>            
    </div>
</div>

Answer 1

这是接近它的一种方式，与其他人的网格建议松散相关：http://codepen.io/panchroma/pen/OMOmZY

一般的想法是重构内容，使An和Bn在同一行上，然后使用媒体查询来操纵这些行元素，并在视口变窄时将它们设置为全宽。

您还需要在每一行上使用clearfix，以便正确清除所有元素

HTML

...  
<div class="row cf">
    <div class="left">article1</div>
    <div class="right">article4</div>
</div>
...

CSS

.left{
  width: 60%;
  float:left;
}
.right{
  width:30%;
  float:left;
}


@media (max-width: 767px) {
  .right{
    width:100%;
  }

  .left{
    width:100%;
  }
}

祝你好运！

如何以响应方式处理数据列？

1 个答案: