Как сделать адаптивный макет? - PullRequest
0 голосов
/ 19 марта 2020

Я хотел сделать адаптивный макет таблицы, который имеет четыре столбца, когда экран достаточно большой. Он должен иметь два столбца в каждой строке, когда экран достаточно мал. А на мобильном устройстве должно быть по одному столбцу на строку.

Позвольте мне показать мой 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>

1 Ответ

0 голосов
/ 19 марта 2020

Это похоже на типичный flex макет.

Для адаптивной части вам понадобится flex-wrap и min-with или mediaquer ie

  • пример с mediaquer ie

.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 элемента в строке, полностью заполненной, где маркер, границы или отступы будут устранены гибкой моделью.


  • Без медиаквера ie, но только пиксель мин. По ширине ваши ящики могут переноситься на следующую строку, но одна упадет первой, затем другой, затем все они (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 (псевдо толкает его)


  • другой вариант - использовать сетку, здесь есть возможность без медиазапросов

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...