我有这个 HTML:
<div id="container">
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</div>
和这个 CSS:
#container {
overflow: hidden
}
article {
float:left;
height: 200px;
width: 200px;
background-color: red;
margin: 5px;
}
我想在不指定宽度的情况下将#container 居中。可能吗？
这是 Fiddle .
编辑: 我需要更改#container 的宽度以适合文章。如果主体宽度为 450px，则每行将有两篇文章，因此容器的宽度应为 400px 左右。如果主体宽度为 1100px，则每行将有 5 篇文章，因此容器的宽度应为 1000px 左右。
最佳答案
你可以尝试这样的事情(jsfiddle):
HTML:
<html>
<body>
<div id="container">
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</div>
</body>
</html>
CSS:
html, body { margin: 0; padding: 0; }
body { text-align: center; }
#container {
overflow: hidden;
margin: 0 auto;
width: 90%;
text-align: left;
}
article {
display:inline-block;
height: 200px;
width: 200px;
background-color: red;
margin: 5px;
}
关于html - 没有宽度的中心 float 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13998402/