Question

我想知道如果没有Javascript，以下是否可行。让我们说我有下表（将项目包装到左边的下一行）。

01  02  03  04
05  06  07  08
09  10  11  12

我希望能够切换到列（从上到下然后换行到下一列）

理想情况下，我希望能够以声明方式指定，例如我可以指定它应该包含的元素数量（第4行或第4列）

<div class="myContainer column-4">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
     ...
</div>

如果我想切换（我只是更新css）

<div class="myContainer row-4">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
     ...
</div>

我尝试过使用柔性盒子，因为它有弯曲方向，但我似乎无法根据元素的不同进行包装。

Answer 1

您可以在float和css列之间切换。我做了一个JS小提琴演示：

https://jsfiddle.net/p46vghrg/

Answer 2

您可以使用flexbox。

检查此示例：

table {
  display: flex;
}
table tr {
  display: flex;
  flex-direction: column;
  float: left;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr><tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr><tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

Answer 3

您可以在媒体查询中使用列，请参阅小提琴https://jsfiddle.net/sxh0n7d1/46/

.myContainer {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}

@media (max-width: 600px) {
  .myContainer {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

Answer 4

当然，构建看起来的东西就像一张桌子但实际上不是桌子一样容易。

body { background: #eee; padding: 20px; margin:0; }

.faketabl { 
    display: block;
    margin: 0 auto;
    width: 100%;}

.row { display: block; clear: both;}
.row.header { 
    margin-top: 5px;
    display: block; }

.col, .row.header > div  { 
    text-align: center;
    display: inline-block; 
    background: #ffd;
    border: 1px solid #2d2d2d;
    margin:0;
    padding: 2px 0;
    width: calc((100% / 6) - 2px); }
.col:nth-of-type(odd):not(nth-of-type(1)) {
   border-left: none; }
.col > div { border-bottom: 1px solid #2d2d2d; }
.col >div:last-of-type { border-bottom: none; }

.row.header > div { 
     border-bottom: none;
     background: #ff3;
     text-transform: uppercase;
     font-weight: bold;
     text-shadow: 0 1px 0 #fff; }

<div class="faketabl">
  <div class="row header">
    <div>Title</div><div>Title</div><div>Title</div><div>Title</div><div>Title</div><div>Title</div>
   </div>
    
  <div class="row">
  <div class="col">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
</div><div class="col">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
</div><div class="col">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
</div><div class="col">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
</div><div class="col">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
</div><div class="col">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
</div>
</div>

  <div class="row header">
    <div>Title</div><div>Title</div><div>Title</div>
   </div>
<div class="row">
  <div class="col">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
</div><div class="col">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
</div><div class="col">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
</div>
</div>

</div>

Answer 5

这是你问的问题：使用column-4和row-4获得所需的结果

.myContainer {
  width: 200px;
}
.myContainer div {
  width: 25%;
  height: 20px;
  box-sizing: border-box;
}
.column-4 div {
  float: left;
}
.row-4 {
  -webkit-column-count: 4;
  /* Chrome, Safari, Opera */
  -moz-column-count: 4;
  /* Firefox */
  column-count: 4;
  column-gap: 0px;
}

<div class="myContainer column-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
  <div>08</div>
  <div>09</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

以下是您的需求：使用column-4和row-4获得所需的结果

是否有可能创建一个流动列或行的html表，并相应地纯粹在CSS中包装？

5 个答案: