使 Div 宽度响应答案

【问题标题】：Making Div Width Responsive使 Div 宽度响应
【发布时间】：2016-01-15 12:37:37
【问题描述】：

我想从这里制作几个“块”文本：

|1| |2| |3| |4| |5| |6|

在比平板电脑更宽的屏幕上查看时，根据较小的屏幕尺寸做出响应，如下所示：

在平板电脑上：

| 1 | | 2 | | 3 |

| 4 | | 5 | | 6 |

在移动设备上：

|1|

|2|

|3|

|4|

|5|

|6|

所有 6 个块排成一行时的全宽为 980px。所以每个 div 是这个宽度的 1/6（大约 163px）。我还希望每个 div 根据所查看的屏幕尺寸具有响应宽度并在屏幕上居中。

到目前为止，我使用的是 float:left，但所做的只是在较小的屏幕上查看时将块保持在屏幕的左侧，在块的右侧留下很大的间隙，这不是我想要的.我希望块居中。

我正在使用 DIV 创建块，但不确定这是否是最好的方法？这是我使用 atm 的代码：

#block {
width: 163.33px;
float: left;
padding: 0px;        
}

如果有人对我如何做到这一点有任何想法，那就太好了:-)

【问题讨论】：

【解决方案1】：

如果我可以分享一个想法，您可以通过将文本块限制在单个元素中来实现。例如：

|A| = ||1| |2| |3| |4| |5| |6||

当您的 html 响应时，它将按照您的意愿自动显示 |A|。如何让你的 html 响应式可以阅读here。

【讨论】：

【解决方案2】：

试试这个css

#block {
width: 163.33px;
display:inline-clock;
padding: 0px;        
}

#block父块

{
text-align-center;
}

【讨论】：