html - 使 Div 宽度响应

Question

我想从这里制作几个“文本 block ”:

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

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

在平板电脑上:

| 1 | | 2 | | 3 |

| 4 | | 5 | | 6 |

在手机上:

|1|

|2|

|3|

|4|

|5|

|6|

所有6个 block 在一条线上时的全宽为980px。所以每个 div 是这个宽度的 1/6(大约 163px)。我还希望每个 div 都具有根据查看的屏幕尺寸响应的宽度，并在屏幕上居中。

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

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

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

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

Answer 1

试试这个 CSS

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

#block 父 block

{
text-align-center;
}