Question

我有一个包含6篇文章的部分。我已经调整了这些文章框的大小以适应iPhone的屏幕。如果计算机屏幕足够大，我希望它们像这样并排排列;

######

但是随着屏幕越来越小，我希望它们下降到下面的那一行但是在页面中居于这些：

#####
  #

####
 ##

###
###

##
##
##

#
#
#
#
#
#

我更喜欢用CSS方法来做这件事，但如果没有，我会尝试别人。我在这个网站上搜索过网络和几本书，但我还没有找到办法。

Answer 1

您可以将text-align:center设置为容器，将display:inline-block设置为该项目。

<强> JsFiddle Demo

＆＃13;

.wrap {
    text-align: center;
}
.item {
    display: inline-block;
}

＆＃13;

<div class="wrap">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

＆＃13;

进一步阅读 - How to remove the space between inline-block elements?

Answer 2

你应该考虑使用一个框架，如果有什么东西让一切跨浏览器开心。大多数框架都有这样一个响应式设计布局系统，可以完全满足您的需求。

我最喜欢的是Twitter Bootstrap：http://getbootstrap.com/

如果你想要更多控制权，w3schools还有一个你可能喜欢的轻量级框架：http://www.w3schools.com/w3css/default.asp

祝你好运

如何将盒子放在同一条线上或彼此居中？

2 个答案: