我周围有几个 float 和一个 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>
只要浏览器窗口足够宽，所有 float 都排成一行，此方法就可以工作。如果窗口变窄，那么最后一个 float 会跳到下一行 float - “内部”DIV 变得与包含 block “外部”一样宽，突然内部不再居中于外部。
最佳答案
我想不出比 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(它具有自动支持任意数量元素的优势)而不是媒体查询。
关于html - CSS - 如何使内部包裹 float 的 DIV 的大小与容纳 float 所需的大小一样大？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8983182/