gpt4 book ai didi

html - 没有宽度的中心 float 容器

转载 作者:行者123 更新时间:2023-11-28 04:07:18 25 4
gpt4 key购买 nike

我有这个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com