Question

我有几个花车和一个DIV。 DIV在另一个DIV中，并且应该在其内部水平居中。问题是内部DIV不是固定宽度，并且不可能。这是代码：

div.outer {
    text-align: center;
}

div.inner {
    display: inline-block;
    width: auto;
}

div.floatdiv {
    display: block;
    float: left;
    width: 270px;
    height: 400px;
    margin: 5px;
    background-color: Gray;
    text-align: center;
}

div.clearboth {
    clear: both;
}

和html：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link href="main.css" rel="stylesheet" type="text/css" static="screen" />
</head>

<body>

        <div class="outer">

            <div class="inner">

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="clearboth">
                </div>

            </div>

        </div>

</body>

这项工作提供了浏览器窗口足够宽，以便所有浮动停留在一行。如果窗口变窄，那么最后一个浮标会跳到下一行浮点数 - ＆＃34;内部＆＃34; DIV变得和包含块一样宽[＆34;外部＆＃34;突然内心不再在外面居中了。

http://jsfiddle.net/BYszs/

Answer 1

我想不出比使用suggestion here的media queries更好的东西。

以下是您的代码的实现：http://jsfiddle.net/thirtydot/BYszs/4/

@media (max-width: 1123px) {
    div.inner {
        max-width: 843px;
    }
}
@media (max-width: 843px) {
    div.inner {
        max-width: 563px;
    }
}
@media (max-width: 563px) {
    div.inner {
        max-width: 280px;
    }
}

这非常麻烦，它不会（自动）支持更多元素，但它可以工作！

嗯，它适用于browsers that support media queries。

如果您需要支持其他浏览器，我建议使用轻量级Respond.js。虽然那时候，可以说你也可以使用JavaScript（它可以自动支持任意数量的元素）而不是媒体查询。

Answer 2

我认为没有解决方案，除非您使用javaScript路由（媒体查询除外），或者通过更新浏览器重新调整大小的事件，或者使用jQuery插件，例如： Masonry

http://masonry.desandro.com/demos/centered.html

CSS - 如何使用包裹的浮动内部制作DIV只需要保持浮动所需的大小？

2 个答案: