css 为什么< div>最大的集装箱装不下？[关闭]

nnvyjq4y 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(108)

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
6天前关闭
Improve this question
（https://i.stack.imgur.com/VY2lw.png）
我试图复制右上角的图片。我添加了颜色、背景色和实心边框来正确地查看元素，所以我可以通过可视化来更容易地设置宽度和高度。
我试着删除边距和填充，但它并没有改变结果。

3条答案

将以下内容添加到CSS中应该可以：

* {
        box-sizing: border-box;
    }

您可以在这里了解更多关于border-box工作原理的信息：https://www.w3schools.com/css/css3_box-sizing.asp
此外，如果你学习Flexbox和CSS Grid来构建你的布局，你可以让css变得更容易。

你的计划混乱的原因是没有使用box-sizing属性，并将子卡片的显示设置为inline-block的值。你可以很容易地通过使用Flex来达到你的目标。

.card {
    display: flex;
    align-items: center;
    padding: 4px;
  }

你可以使用类似于：

.card {
display: grid;
grid-template-columns: 1fr 3fr 2fr;
}

这将有助于大小您的箱子，它看起来大约1：3：2的比例，但你可以调整到你喜欢的方式。