Отзывчивый Div Таблица

Я попытался создать таблицу div с этого сайта: http://divtable.com/generator/

Тем не менее, все работает нормально, за исключением отклика таблицы Div. При минимизации ширины браузера я бы хотел, чтобы он был полностью адаптивным. Например, я бы хотел, чтобы он отображал только два элемента в строке на мобильных устройствах.

Вот код, который я использую для этого:

.divTable{
    display: table;
    width: 100%;
 text-align: center;

}
.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #ffffff;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    border: 1px solid #ffffff;
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #ffffff;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #ffffff;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone4Parts.png?11283548812375177185" alt="" width="200" height="200" /> <br />iPhone 4 Parts</div>
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone4sParts.jpg?3165596616796717679" alt="" width="200" height="200" /> <br />iPhone 4s Parts</div>
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone5Parts.jpg?8873682526308780626" alt="" width="200" height="200" /> <br />iPhone 5 Parts</div>
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone5cwhite.jpg?647508470520316270" alt="" width="200" height="200" /> <br />iPhone 5c Parts</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone5sParts.jpg?8873682526308780626" alt="" width="200" height="200" /> <br />iPhone 5s Parts</div>
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhoneSEParts.jpg?647508470520316270" alt="" width="200" height="200" /> <br />iPhone SE Parts</div>
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6Parts.jpg?18059291597630475032" alt="" width="200" height="200" /> <br />iPhone 6 Parts</div>
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6PlusParts.jpg?9610561940146358986" alt="" width="200" height="200" /> <br />iPhone 6 Plus Parts</div>
</div>
<div class="divTableRow">
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6sParts.jpg?11014928492319611631" alt="" width="200" height="200" /> <br />iPhone 6s Parts</div>
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone6sPlusParts.jpg?8400309241132689431" alt="" width="200" height="200" /> <br />iPhone 6s Plus Parts</div>
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone7Parts.jpg?7760410424665462960" alt="" width="200" height="200" /> <br />iPhone 7 Parts</div>
<div class="divTableCell"><img src="//cdn.shopify.com/s/files/1/1606/7271/files/iPhone7PlusParts.jpg?9544342566201088259" alt="" width="200" height="200" /> <br />iPhone 7 Plus Parts</div>
</div>
</div>
</div>

Источник

2 ответа

Решение

Я предлагаю вам использовать bootstrap, я переработал ваш код, используя стиль начальной загрузки CSS. Я использовал для большого рабочего стола класс col-md-3. Этот класс дает каждому элементу div, включая ваши изображения, ширину 25%, когда размер экрана превышает 992 пикселя, следовательно, у каждого элемента div "row" будет 4 столбца с этой шириной набора. Когда экран меньше, чем 992px, но больше, чем 750px, я применил col-sm-6, который позволяет экрану иметь только 2 изображения для строки. Ширина col-md-6 в файле bootstrap.css установлена ​​на 50%. Максимальное количество столбцов в начальной загрузке - 12, col-sm-6 - 6 столбцов. Для небольших устройств, которые я только что использовал медиа-запрос для максимального размера 320 пикселей, смартфон будет отображать только 1 элемент для строки. Медиа-запрос позволяет вам установить пользовательские правила CSS для определенной ширины окна. Вы можете проверить приведенный ниже код и научиться использовать загрузчик на многих сайтах или по следующей ссылке:

http://getbootstrap.com/

Когда вы используете bootsrap, вам нужно будет включить в ваш файл head, прежде чем ваш файл main.css, ссылку на загрузочную CDN или ваш локальный файл начальной загрузки. Вы должны включить этот файл начальной загрузки перед таблицей стилей, чтобы вы могли перезаписать эти правила своими правилами.

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="main.css" rel="stylesheet" />
    </head>

    <body>

    <div class="row">
      <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone4Parts.png?11283548812375177185" alt="" width="200" height="200" /> <br />iPhone 4 Parts
      </div>
      <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone4sParts.jpg?3165596616796717679" alt="" width="200" height="200" /> <br />iPhone 4s Parts
      </div>
      <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone5Parts.jpg?8873682526308780626" alt="" width="200" height="200" /> <br />iPhone 5 Parts
      </div>
      <div class="col-md-3 col-xs-6 divTableCell"><img src="https://cdn.shopify.com/s/files/1/1606/7271/files/iPhone5cwhite.jpg?647508470520316270" alt="" width="200" height="200" /> <br />iPhone 5c Parts
      </div>
    </div>

    </body>
</html>

Это ксс

.divTableCell, .divTableHead {
    border: 1px solid #ffffff;
    /*display: table-cell;
    padding: 3px 10px;*/
    text-align: center;
}

@media (max-width: 320px) { 
    .divTableCell {
        width: 100%;
    }
}
Источник

Если вы просто хотите адаптивную таблицу.... Используйте библиотеку Bootstrap, создайте

<table class="table-responsive">
<tbody class="table"></tbody>
</table>

и вам хорошо идти... читайте больше здесь:
http://v4-alpha.getbootstrap.com/content/tables/ http://www.w3schools.com/bootstrap/bootstrap_tables.asp

ПРИМЕЧАНИЕ: установка ширины и высоты в пикселях всегда не очень хорошая практика, если вы хотите, чтобы определенный div реагировал. Потому что Pixel устанавливает фиксированную ширину и высоту div, которые не изменят размер, несмотря ни на что.

Вы можете попробовать загрузочную библиотеку или установить ширину и высоту в процентах

width="100%"
Источник
Другие вопросы по тегам