Question

我的问题是关于弹性包装盒。我有一个要添加弹性框的基础表。该表宽4列，当屏幕是移动设备时，我试图将这些列成对堆叠。

我一直在尝试弄乱代码，但是我不知道要在哪里添加flex CSS输入来实现这一目标。

这是我的目标：

桌面：

A1   B1   C1   D1
a2   b2   c2   d2
a3   b3   c3   d3

手机：

A1   B1
a2   b2
a3   b3
C1   D1
c2   d2
c3   d3

这是我当前的代码

<style>
  div.packages {
     font-family: Verdana, Geneva, sans-serif;
     border: 1px solid #A9A9A9;
     width: 100%;
     text-align: center;
     border-collapse: collapse;
     }
 .divTable.packages .divTableCell, .divTable.packages .divTableHead {
     border: 1px solid #A9A9A9;
     padding: 3px 2px;
     }
 .divTable.packages .divTableBody .divTableCell {
    font-size: 14px;
    color: #656565;
    }
 .divTable.packages .divTableRow:nth-child(even) {
    background: #EFEFEF;
    }
 .divTable.packages .divTableHeading {
    }
 .divTable.packages .divTableHeading .divTableHead {
    font-size: 22px;
    font-weight: bold;
    color: #FF8700;
    text-align: center;
    }
  .packages .tableFootStyle {
    font-size: 13px;
    }
  .packages .tableFootStyle .links {
    text-align: right;
    }
  .packages .tableFootStyle .links a{
    display: inline-block;
    background: #FFFFFF;
    color: #A40808;
    padding: 2px 8px;
    border-radius: 5px;
    }
 .packages.outerTableFooter {
    border-top: none;
    }
 .packages.outerTableFooter .tableFootStyle {
    padding: 3px 5px; 
    }
/* DivTable.com */
 .divTable{ display: table; }
 .divTableRow { display: table-row; }
 .divTableHeading { display: table-header-group;}
 .divTableCell, .divTableHead { display: table-cell;}
 .divTableHeading { display: table-header-group;}
 .divTableFoot { display: table-footer-group;}
 .divTableBody { display: table-row-group;}
 </style>



 <div class="divTableHeading">
 <div class="divTableRow">
 <div class="divTableHead">head1</div>
 <div class="divTableHead">head2</div>
 <div class="divTableHead">head3</div>
 <div class="divTableHead">head4</div>
 </div>
 </div>
 <div class="divTableBody">
 <div class="divTableRow">
 <div class="divTableCell">cell1_1</div><div class="divTableCell">cell2_1</div><div class="divTableCell">cell3_1</div><div class="divTableCell">cell4_1</div></div>
 <div class="divTableRow">
 <div class="divTableCell">cell1_2</div><div class="divTableCell">cell2_2</div><div class="divTableCell">cell3_2</div><div class="divTableCell">cell4_2</div></div>
 <div class="divTableRow">
 <div class="divTableCell">cell1_3</div><div class="divTableCell">cell2_3</div><div class="divTableCell">cell3_3</div><div class="divTableCell">cell4_3</div></div>
 <div class="divTableRow">
 <div class="divTableCell">cell1_4</div><div class="divTableCell">cell2_4</div><div class="divTableCell">cell3_4</div><div class="divTableCell">cell4_4</div></div>
 <div class="divTableRow">
 <div class="divTableCell">cell1_5</div><div class="divTableCell">cell2_5</div><div class="divTableCell">cell3_5</div><div class="divTableCell">cell4_5</div></div>
 </div>

Answer 1

即使您可以通过table属性来实现该行为，也不一定会很复杂。使用flexbox + list items是一种更简单有效的方法。

您可以为每个列创建一个列表，并将它们分组在flex容器中，以实现所需的行为。您可以通过media-queries根据屏幕尺寸更改元素的属性。我在下面为您制作了一个演示。当屏幕尺寸小于600px时，列容器不再弯曲，因此它们会包裹起来。调整浏览器的大小以查看其变化。

#container {
    display: flex;
}
#column-1-2 {
    display: flex;
}
#column-3-4 {
    display: flex;
}
.column ul {
    list-style: none;
    margin-bottom: 0;
}
@media only screen and (max-width: 600px) {
    #column-3-4, #column-1-2 {
        display: block;
    }
}

<div id="container">
    <div id="column-1-2">
        <div class="column">
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
            </ul>
        </div>
        <div class="column">
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
            </ul>
        </div>
    </div>
    <div id="column-3-4">
        <div class="column">
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
            </ul>
        </div>
        <div class="column">
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
            </ul>
        </div>
    </div>
</div>

带Flex-box的堆栈列表

1 个答案: