流体网格布局

阿卡什

我正在创建一个表单。在表单中,我有 20 多个 html 控件,即文本框、复选框、文本区域。我想以表格格式排列所有 html 元素。但是当屏幕尺寸减小时,列数应该减少。例子。最初将有 4 列。当屏幕尺寸减小时,列数变为 3。进一步屏幕尺寸减小时,列数变为 2,然后变为 1。

如何实现?

维沙尔

使用Flexbox Layout设计灵活的响应式布局结构:

* {box-sizing: border-box;}

/* Style Row */
.row {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}

/* Make the columns stack on top of each other */
.row > .column {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Responsive layout - makes a two column-layout (50%/50% split) */
@media screen and (min-width: 600px) {
  .row > .column {    
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes a four column-layout (25%/25% split) */
@media screen and (min-width: 991px) {
  .row > .column {    
    flex: 0 0 25%;
    max-width: 25%;
  }
}
<p>Resize this frame to see the responsive effect!</p>

<div class="row">
  <!-- First Column -->
  <div class="column" style="background-color: #dc3545;">
    <h2>Column 1</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Second Column -->
  <div class="column" style="background-color: #ffc107;">
    <h2>Column 2</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
  </div>
  <!-- Third Column -->
  <div class="column" style="background-color: #007eff;">
    <h2>Column 3</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
  </div>
  <!-- Fourth Column -->
  <div class="column" style="background-color: #28a745;">
    <h2>Column 4</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
  </div>
</div>

参考: 创建混合列布局

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章