我尝试从这个网站生成一个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>
答案 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:
当您使用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%"