3 列响应式 CSS（排序内容位置）

Posted 2023-03-06

【中文标题】3 列响应式 CSS（排序内容位置）

【英文标题】：3 Column Responsive CSS (Ordering Contents Positions)

【发布时间】：2013-03-21 10:06:08

【问题描述】：

我想知道当屏幕尺寸减小到 480 或更低时，有什么方法可以对内容位置进行排序。我的意思是在第 3 列我将有姓名、号码和地址等，在第 2 列我将有社交资料，在第 1 列我将有一个图像。我希望首先将名称和地址堆叠起来，然后是图像，然后是社交图标。顺序是 3,1,2。我试图让它保持响应。

CSS：

/*  SECTIONS  */
.section 
clear: both;
padding: 0px;
margin: 0px;
 

/*  COLUMN SETUP  */
.col 
display: block;
float:left;
margin: 1% 0 1% 1.6%;

.col:first-child  margin-left: 0; 


/*  GRID OF THREE           ============================================================================= */


.span_3_of_3 
width: 100%; 


.span_2_of_3 
width: 66.1%; 


.span_1_of_3 
width: 32.2%; 



 /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

 @media only screen and (max-width: 480px) 
.span_3_of_3 
    width: 100%; 

.span_2_of_3 
    width: 100%; 

.span_1_of_3 
    width: 100%;

HTML：

<div class="section group">
<div class="col span_1_of_3">
This is column 1
</div>
<div class="col span_1_of_3">
This is column 2
</div>
<div class="col span_1_of_3">
This is column 3
</div>
</div>

【参考方案1】：

优化移动设备的源顺序并使用 metadept 的解决方案对桌面的列重新排序会更有效。

但是，如果由于某种原因无法修改源顺序，或者您不知道要重新排序的元素的宽度，那么您需要 Flexbox：

http://jsfiddle.net/4KUUt/3/

/*  SECTIONS  */
/* line 5, ../sass/test.scss */
.section 
  clear: both;
  padding: 0px;
  margin: 0px;


/* line 11, ../sass/test.scss */
.a 
  background-color: #CCF;


/* line 14, ../sass/test.scss */
.b 
  background-color: #CFC;


/* line 17, ../sass/test.scss */
.c 
  background-color: #FCC;


/*  GRID OF THREE           ============================================================================= */
@media only screen and (min-width: 480px) 
  /* line 24, ../sass/test.scss */
  .span_3_of_3 
    width: 100%;
  

  /* line 28, ../sass/test.scss */
  .span_2_of_3 
    width: 66.1%;
  

  /* line 32, ../sass/test.scss */
  .span_1_of_3 
    width: 32.2%;
  

  /*  COLUMN SETUP  */
  /* line 37, ../sass/test.scss */
  .col 
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
  

  /* line 42, ../sass/test.scss */
  .col:first-child 
    margin-left: 0;
  

@media only screen and (max-width: 480px) 
  /* line 48, ../sass/test.scss */
  .section 
    width: 100%; /* fix for Firefox */
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  

  /* line 53, ../sass/test.scss */
  .a 
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-flex-order: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  

  /* line 57, ../sass/test.scss */
  .b 
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-flex-order: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  



<div class="section group">
    <div class="col span_1_of_3 a">This is column 1</div>
    <div class="col span_1_of_3 b">This is column 2</div>
    <div class="col span_1_of_3 c">This is column 3</div>
</div>

请注意，我已修改您的媒体查询以提高效率。

【讨论】：

哇，太干净了！你在没有 JS 的情况下做这件事我很满意，因为到目前为止，我的整个构建过程中我一直在使用纯 html5 和 css3 来保持它的轻量级。很棒的东西西马农！

我不明白的一件事是“/sass/test.scss”是仅供参考还是有什么作用？

它只是用来用 Sass 调试的，我在粘贴时懒得把它们全部剪掉。

我现在有个问题。我已经加入并开始用内容填充它，但它现在不起作用。它开始移动到错误的位置并且内容重叠

嗨@cimmanon，这很棒。我想知道是否可以使用与此类似的代码在较小的屏幕上重新组织表格列？我尝试了几种不同的方法都无济于事，很想在这里了解我的问题（有一个 plnkr 示例）：***.com/questions/27264308/…

【参考方案2】：

我在理解您的列排序时遇到了一点麻烦，但让它们在移动设备上重新排列的方法是使用边距“推”和“拉”。例如：

.span_1_of_3 
    margin-left: 33%;


.span_2_of_3 
    margin-left: -65%;

这将使第 2 列在并排（桌面）布局中出现在第 1 列之前，然后您可以删除堆叠（移动）布局的边距。

查看这个 jsFiddle：http://jsfiddle.net/4KUUt/

编辑 2

我想我已经按照您想要的顺序设置了它。如果你还在寻找解决方案，试试这个：http://jsfiddle.net/4KUUt/5/

【讨论】：

看起来不错，但我尝试自己订购，但我无法理解它。您制作的布局，我需要将其订购为“3 移至 2........ 2 移至 1....... 1 移至 3。任何机会您都可以再花几分钟重新排列它?

@Exhausted - 所以假设在桌面上它是（从左到右）1、2、3，你希望移动设备是 2、3、1？

桌面是 1,2,3 而在移动设备上我需要 1,3,2

是的，对不起，你是正确的 3,1,2！这是白菜我的大脑！哈哈

因为，我刚刚为 3,1,2 创建了解决方案，当我看到“1,3,2”时，我的大脑爆炸了：D

【参考方案3】：

嗯，这是一些奇怪的解决方案，但使用 jQuery :) 只是在试验。

首先，我在 HTML 标记中添加了额外的类。然后，我为移动设备添加了 .third 类的这个属性

.third 
    width: 100%;
    margin: 0;
    position: absolute;
    top: 0;

然后是这个 jQuery 代码

$(window).resize(function()
    if ($(".third").css("position") == "absolute") 
    
        $(".first").css("margin-top", $(".third").height());
    
    else
    
        $(".first").css("margin-top", "1%");
    
);

有很多变化，所以看看这个小提琴http://jsfiddle.net/AYcVF/2/

也许有人只有 CSS 的解决方案，但这是迄今为止我能做的最好的。