gpt4 book ai didi

html - 如何让父容器和子容器一样大?

转载 作者:太空宇宙 更新时间:2023-11-03 19:56:46 25 4
gpt4 key购买 nike

我正在用 div 制作一张 table 。我使用 div 的原因是表格可能没有我想要的那么灵敏。

无论如何,我制作的这个容器应该是 child 的宽度并居中,但是由于某种原因它决定更大,尽管没有设置宽度。关于如何解决这个问题的任何想法?

.wrapper {
transform: translate(-50%, 0);
margin-left: 50%;
height: 100%;
background-color: purple;
}

.wrapper div {
background-color: cornflowerblue;
width: 150px;
height: 150px;
display: block;
float: left;
margin: 10px;
}
<body style="margin: 0; height: 100vh; width: 100vw;">
<section class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>

最佳答案

这是你的花车。如果您希望容器“包含”div,则必须“ float ”bu,或者在容器本身上使用 float 或使用内联 block 。

我建议使用 display:inline-block

试试这个:

.wrapper {
display: inline-block;
background-color: purple;
margin: 0px auto;
max-width: 280px;
padding: 0;
}

.wrapper div {
background-color: cornflowerblue;
width: 120px;
height: 120px;
display: block;
float: left;
margin: 10px;
}

这将使您的容器实际包含其中的元素。此外,您需要将 max-width 添加到容器中,以确保右侧没有任何不稳定的填充。您可能想使用一些媒体查询来设置它,以便它在每种尺寸下看起来都合适。

@media screen AND (max-width: 300px) {
.wrapper {
max-width: 280px;
}
}

关于html - 如何让父容器和子容器一样大?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38918819/

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