Question

我想有一个以其父级为中心的div，但其中的子项将保持对齐。想要这个，我获得了以下内容：

＆＃13;

.centered {
    text-align: center;
}
.container {
    background: red;
    padding: 10px;
    display: inline-block;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

＆＃13;

<div class="centered">
<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
</div>

＆＃13;

http://jsfiddle.net/SbPRg/（来源：Having the floating children elements determine parent width）。

问题在于，当您调整页面大小时，仍然存在问题，而主要＆＃34;红色＆＃34; div比我想要的要宽，并且显示红色的很大一部分，而不是调整到适合的小容器。它的孩子。

你有没有想过如何获得这样的东西，没有javascript？

主要想法是展示一个＆＃34;画廊＆＃34;图像，以响应方式（如果屏幕太小，每行显示一个图像，如果屏幕很宽，则每行显示三个图像）。

Answer 1

只需添加CSS Media Query规则即可。将以下规则添加到CSS中。

<强> CSS

@media screen and (max-width: 337px) {
    .child
    {
        float:none;
        text-align:center;
        display:block;
    }
}

Working : Demo

注意：CSS媒体查询用于根据屏幕宽度和高度来影响HTML的样式

在您的示例中，我添加了媒体查询规则，当屏幕 .child 到达 width时，该规则会为337px课程提供样式。

对于heights的宽度，最大宽度或最小宽度可能相似。

什么是max-width：我在这里给出了 337px ，因此它表示规则中的css仅在屏幕宽度为 <=337px时才适用< / strong>即可。如果屏幕宽度为 >337px ，则不会在该规则中应用css。

Answer 2

只需将容器宽度设置为您想要的确切宽度（在JSFidlle中：您需要添加width:300px;）

当你调整窗口大小时，没有任何事情发生。

使其具有响应性：

@media screen and (max-width:480px)

并为每个屏幕尺寸设置容器的宽度（或者为三个块设置容器的宽度，然后为一个块设置容器的宽度）

Answer 3

您可以尝试这样的媒体查询：

@media screen and (max-width: 350px) {
  .container {width: 100px;}
}

Check the demo

Answer 4

父容器＆＃34;显示大部分红色而不是调整大小适合“＃”的小容器的原因。它的孩子＆＃34;是你明确给出了所有边上十个像素的填充。从.container中删除该填充，div将缩小到其子项的宽度。

Answer 5

我想你想要像this这样的东西。使用媒体查询根据各种屏幕尺寸将相关的css应用于元素。

以下是您需要添加的CSS：

@media only screen and (max-width: 350px) {
    .child {
        clear:both;
    }
}

另一种选择是使用像Bootstrap这样的框架，它足以制作响应式网页。

以下是您可以参考的链接：

浮动，左对齐，居中div

5 个答案: