Question

我的代码如下：

    <div style="display: table; width: 100%; table-layout: fixed; border-spacing: 10px;">

<div style="text-align: center; display: table-cell;">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br> 
Text 
</div>

<div style="text-align: center; display: table-cell;">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br> 
Text 
</div>

<div style="text-align: center; display: table-cell;">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br> 
Text 
</div>


<div style="text-align: center; display: table-cell;">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br> 
Text 
</div>

</div>

它可以在PC上正常工作，但在移动设备上它的工作非常难看，所有图像和文字都可以使用。如何修改，div可以格式化4x1行，2x2行居中，1x4行居中（适用于手机）。

Answer 1

您正在寻找响应式网格系统。因此，您需要添加一些具有网格系统并且响应迅速的CSS。多年来最常见的一个是Bootstrap。

只需在head部分的HTML中添加以下CSS：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">

如果您想了解更多信息，请访问以下是Bootstrap的网站： http://getbootstrap.com/

接下来，您要使用网格系统，Bootstrap使用12个单元网格系统，因此整个页面分为12个块。它还根据每个设备的大小将每个设备定义为以下设备之一：XS，SM，MD，LG

点击此处了解详情：http://getbootstrap.com/css/#grid

长话短说，移动设备被认为是XS（超小型）纵向和Lanscape可能会有所不同，因此您现有的HTML应该是这样的：

 <div class="container" style="text-align:center">  <div class="row">

<div class="col-xs-12 col-md-6 col-lg-3">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br> 
Text 
</div>

<div class="col-xs-12 col-md-6 col-lg-3">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br> 
Text 
</div>

<div class="col-xs-12 col-md-6 col-lg-3">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br> 
Text 
</div>


<div class="col-xs-12 col-md-6 col-lg-3">
<a href="#"><img src="/image.png" alt="" width="auto" border="0" /></a>
<br> 
Text 
</div>

</div></div>

4个div在一行中，将div移动到新行

1 个答案: