响应Div表

时间:2017-01-31 13:11:28

标签: html css grid responsive css-tables

我尝试从这个网站生成一个div表:http://divtable.com/generator/

然而,除了Div Table的响应性之外,一切正常。在最小化浏览器宽度时,我希望它能够完全响应。例如,我只希望它在移动设备上每行显示两个项目。

以下是我正在使用的代码:

.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 个答案:

答案 0 :(得分:5)

我建议你使用bootstrap,我使用bootstrap CSS样式重新设计你的代码。我用于大型桌面col-md-3类。当屏幕大于992px时,此类为每个div(包括图像)提供25%的宽度,因此每个“row”div在此设置宽度处将具有4列。 当屏幕小于992px,但大于750px时,我应用了col-sm-6,让屏幕只有2个图像用于行。 bootstrap.css文件中col-md-6的宽度设置为50%。 bootstrap中的最大列数为12,col-sm-6表示6列跨度。对于我刚刚使用媒体查询的小型设备,最大尺寸为320像素,智能手机只会显示1个项目。 媒体查询允许您为特定窗口宽度设置自定义css规则。 您可以查看以下代码,并在许多网站或以下链接学习使用bootstrap:

http://getbootstrap.com/

当您使用bootsrap时,您需要在main.css文件之前包含头文件中的bootstrap 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>

这是css

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

@media (max-width: 320px) { 
    .divTableCell {
        width: 100%;
    }
}

答案 1 :(得分:0)

如果你只想要一个响应表....使用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中设置宽度和高度始终不是一个好习惯。因为Pixel设置了一个固定的宽度和div的高度,无论如何都不会改变大小。

您可以尝试引导库,或将宽度和高度设置为百分比

width="100%"