css 如何为每排最多20个座位的座位预订应用程序制作一个集合布局？

bnl4lu3b 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(125)

那么，我该如何为一个座位预订应用程序做一个静态布局，每行最多有20个座位，而在调整窗口大小时不改变布局呢？我正在做一个react项目，我想有一个可变数量的座位，但是调整大小时座位布局不能改变。这在尝试预订座位时是没有意义的。
我收集到的信息是，这是可能的使用网格和或flexbox。我已经尝试使用flex-wrap，但使用flex-wrap改变布局。不使用flex-wrap导致座位溢出到div的一侧。
代码如下所示

<Section>

  <div>
    <Chair>
    <Chair>
   
  <div/>

  <div>
    <Chair>
    <Chair>
  
   <div/>

  <div>
    <Chair>
    <Chair>
  
   <div/>
<Section/>

What I want
What I have
希望有人能在正确的方向上给予我一点提示。
我试过使用flexbox，grid，但是没有一个能像我想要的那样工作。Gridbox给了我一个很好的布局，但是在调整大小的时候坏了。Flexbox没有多大帮助。

css

来源：https://stackoverflow.com/questions/75062015/how-would-i-make-a-set-layout-for-a-seat-booking-application-with-a-maximum-of-2

1条答案

按热度按时间

ruarlubt1#

为了在调整窗口大小时不改变布局的情况下使每行有20个座位，可以使用CSS网格。然后使用grid-template-columns属性来定义需要占用一行的列数。我在一个父元素中定义了20个div元素，然后使用grid-template-columns属性将10个div排列在一行中。对于您的情况，将该值更改为20。

.grid-container {
  display: grid;
  grid-template-columns:  repeat(10, 1fr) ;
}
.grid-item {
  border: 1px solid black;
  font-size: 12px;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
  <div class="grid-item">10</div> 
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>  
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>  
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>  
  <div class="grid-item">20</div>
</div>

赞(0）回复(0）举报 2023-01-14

我来回答

css 如何为每排最多20个座位的座位预订应用程序制作一个集合布局？

1条答案

相关问题

热门标签

最新问答