Html 响应Div表_Html_Css_Grid_Responsive_Css Tables

Html 响应Div表

html css grid

Html 响应Div表,html,css,grid,responsive,css-tables,Html,Css,Grid,Responsive,Css Tables,我尝试从此网站生成div表：但是，除了Div表的响应性之外，其他一切都正常工作。当最小化浏览器宽度时，我希望它能够完全响应。例如，我只希望它在移动设备上每行显示两个项目下面是我使用的代码： .divTable{ 显示：表格；宽度：100%；文本对齐：居中； } .divTableRow{ 显示：表格行； } .表格标题{ 背景色：#ffffff；显示：表头组； } .divTableCell、.divTableHead{ 边框：1px实心#ffffff；显示：表格单元格；填充：3

我尝试从此网站生成div表：

但是，除了Div表的响应性之外，其他一切都正常工作。当最小化浏览器宽度时，我希望它能够完全响应。例如，我只希望它在移动设备上每行显示两个项目

下面是我使用的代码：

.divTable{
显示：表格；
宽度：100%；
文本对齐：居中；
}
.divTableRow{
显示：表格行；
}
.表格标题{
背景色：#ffffff；
显示：表头组；
}
.divTableCell、.divTableHead{
边框：1px实心#ffffff；
显示：表格单元格；
填充：3x10px；
}
.表格标题{
背景色：#ffffff；
显示：表头组；
字体大小：粗体；
}
.桌脚{
背景色：#ffffff；
显示：表尾组；
字体大小：粗体；
}
.表格正文{
显示：表格行组；
}



iPhone 4部件

iPhone 4s配件

iPhone 5部件

iPhone 5c部件

iPhone 5s部件

iPhone SE部件

iPhone 6部件

iPhone 6 Plus部件

iPhone 6s部件

iPhone 6s Plus配件

iPhone 7部件

iPhone 7 Plus部件

如果您只需要一个响应表…请使用引导库，创建一个

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

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

使用bootsrap时，需要在main.css文件之前的head文件中包含指向引导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>

你有引导包括在内。你为什么不使用网格呢？

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