Question

我的桌子的固定宽度为960px，有5列。

当我在移动设备中观看时，我想制作专栏3,4,5 看起来好像它在下一行。

有没有什么方法可以打破一行，所以看起来这样，但是仍保留原始HTML代码？

Answer 1

您可以使用FlexBox：

.flexParent{
  display: flex;
}

.flexChild{
  width: 20%;
}

@media only screen and (max-width: 767px) {
   .flexParent{
      flex-wrap: wrap; 
   }
   .flexChild{
     width: 50%;
   }
   .wrap{
     width: 30%;
   }
}

<div class="flexParent">
  <div class="flexChild">1</div>
  <div class="flexChild">2</div>
  <div class="flexChild wrap">3</div>
  <div class="flexChild wrap">4</div>
  <div class="flexChild wrap">5</div>
</div>

Answer 2

你可以试试CSS媒体查询，例子（调整你自己的宽度）

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 20%;}
    .col-2 {width: 20%;}
    .col-3 {width: 20%;}
    .col-4 {width: 20%;}
    .col-5 {width: 20%;}
}

@media only screen and (max-width: 767px) {
    /* For mobile: */
    .col-1 {width: 50%;}
    .col-2 {width: 50%;}
    .col-3 {width: 30%;}
    .col-4 {width: 30%;}
    .col-5 {width: 30%;}
}

更多示例 here

拆分表行用于较小的屏幕

2 个答案: