html - 一行4个div，将div移到新行

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。

只需将以下 CSS 添加到 head 部分的 HTML 中:

<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 个 block 。它还根据其尺寸将每个设备定义为以下之一:XS、SM、MD、LG

在这里了解更多:http://getbootstrap.com/css/#grid

长话短说，手机被认为是 XS(特小)纵向和横向可能不同，因此您现有的 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>