Quadro Div Sensível

tentei gerar uma tabela div a partir deste site: http://divtable.com/generator/

No entanto, está tudo a funcionar bem, excepto a capacidade de Resposta da tabela Div. Ao minimizar a largura do navegador, Eu gostaria que ele fosse totalmente responsivo. Por exemplo, eu só gostaria que ele mostrasse dois itens por linha em dispositivos móveis.

Aqui está o código que estou a usar para isso. 

.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>
Author: Brian Tompsett - 汤莱恩, 2017-01-31
Source

2 answers

Sugiro que use o bootstrap, redesenhei o seu código usando o estilo css do bootstrap. Eu usei para o grande desktop a classe col-md-3. Esta classe dá a cada um dos div, incluindo as suas imagens, uma largura de 25% quando a tela é maior do que 992px, consequentemente cada div "linha" terá 4 colunas nesta largura definida. Quando a tela é menor do que 992px, mas maior do que 750px eu apliquei o col-sm-6 que deixou a tela apenas ter 2 imagens para a linha. A largura da col-md-6 na barra de inicialização.ficheiro css está fixado em 50%. O número máximo de colunas no bootstrap é de 12, col-sm-6 significa a extensão de 6 colunas. Para os pequenos dispositivos que acabei de usar uma consulta de mídia para o tamanho máximo de 320 px, o smartphone só irá exibir um item para linha. A pesquisa multimédia permite-lhe definir regras CSS personalizadas para uma largura específica do windows. Você pode verificar o código abaixo e aprender a usar bootstrap em muitos sites ou no seguinte link:

Http://getbootstrap.com/

Quando utilizar bootsrap, terá de incluir no seu ficheiro da cabeça, antes do principal.ficheiro css a ligação para o CDN do bootstrap ou para o seu ficheiro de bootstrap local. Você deve incluir este ficheiro bootstrap, antes da sua 'stylesheet', para que possa sobrepor estas regras com as suas regras personalizadas.

<!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>

Este é o css 

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

@media (max-width: 320px) { 
    .divTableCell {
        width: 100%;
    }
}
 6
Author: Fabrizio Bertoglio, 2017-01-31 14:56:35

Se você só quer uma tabela responsiva....Usar a biblioteca de inicialização, criar um 

<table class="table-responsive">
<tbody class="table"></tbody>
</table>
E estás pronto para ir...leia mais aqui:
http://v4-alpha.getbootstrap.com/content/tables/ http://www.w3schools.com/bootstrap/bootstrap_tables.asp

Nota: definir a largura e a altura em pixels nem sempre é uma boa prática se quiser que um div específico seja sensível. Porque Pixel define uma largura e altura fixas do div que não muda o tamanho, não importa o que aconteça.

Você pode tentar a biblioteca de bootstrap, ou definir a largura e a altura para a percentagem 

width="100%"
 1
Author: Abdulrahman Mushref, 2017-01-31 14:25:52