响应 Div Table

Question

我尝试从这个网站生成 div table：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>

Answer 1

如果您只想要响应式 table...使用 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 的固定宽度和高度，无论如何都不会改变大小。

你可以试试bootstrap库，或者设置宽高为百分比

width="100%"

Answer 2

我建议你使用 bootstrap，我使用 bootstrap CSS 风格重新设计了你的代码。我用于大型桌面 col-md-3 class。当屏幕大于 992px 时，class 为每个 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 行的项目。媒体查询允许您为特定 windows 宽度设置自定义 css 规则。您可以查看下面的代码并学习使用 bootstrap 在许多网站或在以下 link:

http://getbootstrap.com/

当你使用 bootsrap 时，你需要在你的头文件中，在你的 main.css 文件之前包含 link 到 bootstrap CDN 或你的本地 bootstrap文件。您应该在样式表之前包含此 bootstrap 文件，以便您可以使用自定义规则覆盖此规则。

<!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%;
    }
}

响应 Div Table

Responsive Div Table

html

css

grid

responsive

css-tables