Question

我想制作一个响应表布局，当屏幕足够大时，该布局具有四列。屏幕足够小时，每行应有两列。在移动设备上，每行应该有一列。

让我展示我的HTML / CSS

.conatiner .table {
  display: table;
  width: 100vw;
}

.container .table .table-row {
  display: table-row;
}

.container .table .table-row .table-cell {
  display: table-cell;
  width: 25%;
  padding: 10px;
}

.container .table .table-row .table-cell .name {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0;
  margin-bottom: 20px;
  font-family: monospace;
  font-size: 27px;
}

.container .table .table-row .table-cell .img {
  display: block;
  width: 100%;
  height: 280px;
  margin: 0 auto;
  background-color: brown;
}

.container .table .table-row .table-cell .content {
  display: block;
  width: 100%;
  padding: 5px;
  font-size: 18px;
  font-family: serif;
}

<div class="container">
  <div class="table" id="table">
    <div class="table-row" id="row">
      <div class="table-cell" id="serv">
        <div class="name">web development</div>
        <div class="img"></div>
        <div class="content"></div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">logical game development</div>
        <div class="img"></div>
        <div class="content">
          <!-- text goes here-->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">web app development</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">content writing</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这看起来像是典型的flex布局。

对于响应部分，您需要flex-wrap和min-with或媒体查询

带有媒体队列的示例

.conatiner .table { 
}

.container .table .table-row {
  display:flex;
  flex-wrap:wrap;
}

.container .table .table-row .table-cell {
  flex:1;
  min-width: 20%;
  padding: 10px;
  /*optionnal*/
  display:flex;
  flex-direction:column;
}

.container .table .table-row .table-cell .name {
  text-align: center; 
  margin-bottom: 20px;
  font-family: monospace;
  font-size: 27px;
  /*optionnal*/
  flex:1;
}

.container .table .table-row .table-cell .img {  
  height: 280px; 
  background-color: brown;
}

.container .table .table-row .table-cell .content { 
  padding: 5px;
  font-size: 18px;
  font-family: serif;
}

@media screen and (max-width:992px) {
  .container .table .table-row .table-cell {
    min-width:40%;
  }
}

@media screen and (max-width:576px) {
  .container .table .table-row  {
    display:block;
  }
}

<div class="container">
  <div class="table" id="table">
    <div class="table-row" id="row">
      <div class="table-cell" id="serv">
        <div class="name">web development</div>
        <div class="img"></div>
        <div class="content"></div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">logical game development</div>
        <div class="img"></div>
        <div class="content">
          <!-- text goes here-->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">web app development</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">content writing</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>
    </div>
  </div>
</div>

flex:1 + min-width是一种无需添加最终宽度即可添加一些边距（或填充/边框，取决于框大小）的方法。 flex:1;min-width:20%;会在完全填充的一行上喷涂4个元素，而flex模型会注意其中的空白，边框或填充。

没有中间框，但只有最小像素宽度，您的框可以换行到下一行，但是一个框会首先掉落，然后又是另一个，然后全部落下（4）

示例

.conatiner .table { 
}

.container .table .table-row {
  display:flex;
  flex-wrap:wrap;
}

.container .table .table-row .table-cell {
  flex:1;
  min-width: 350px;
  padding: 10px;
  /*optionnal*/
  display:flex;
  flex-direction:column;
}

.container .table .table-row .table-cell .name {
  text-align: center; 
  margin-bottom: 20px;
  font-family: monospace;
  font-size: 27px;
  /*optionnal*/
  flex:1;
}

.container .table .table-row .table-cell .img {  
  height: 280px; 
  background-color: brown;
}

.container .table .table-row .table-cell .content { 
  padding: 5px;
  font-size: 18px;
  font-family: serif;
}

<div class="container">
  <div class="table" id="table">
    <div class="table-row" id="row">
      <div class="table-cell" id="serv">
        <div class="name">web development</div>
        <div class="img"></div>
        <div class="content"></div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">logical game development</div>
        <div class="img"></div>
        <div class="content">
          <!-- text goes here-->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">web app development</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">content writing</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>
    </div>
  </div>
</div>

上一个代码段的替代方法，其中最后一个框单独在第二行时不会扩展整个宽度：https://codepen.io/gc-nomade/pen/OJVwVpw（伪按此键）

另一种选择是使用grid-layout，这是没有中介查询的可能性

.conatiner .table { 
}

.container .table .table-row {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
}

.container .table .table-row .table-cell {
  flex:1;
  min-width: 350px;
  padding: 10px;
  /*optionnal*/
  display:flex;
  flex-direction:column;
}

.container .table .table-row .table-cell .name {
  text-align: center; 
  margin-bottom: 20px;
  font-family: monospace;
  font-size: 27px;
  /*optionnal*/
  flex:1;
}

.container .table .table-row .table-cell .img {  
  height: 280px; 
  background-color: brown;
}

.container .table .table-row .table-cell .content { 
  padding: 5px;
  font-size: 18px;
  font-family: serif;
}

<div class="container">
  <div class="table" id="table">
    <div class="table-row" id="row">
      <div class="table-cell" id="serv">
        <div class="name">web development</div>
        <div class="img"></div>
        <div class="content"></div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">logical game development</div>
        <div class="img"></div>
        <div class="content">
          <!-- text goes here-->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">web app development</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>

      <div class="table-cell" id="serv">
        <div class="name">content writing</div>
        <div class="img"></div>
        <div class="content">
          <!-- the text goes here -->
        </div>
      </div>
    </div>
  </div>
</div>

如何进行响应式布局？

1 个答案: