CSS：1）如何使浮动元素的高度不受子元素的影响？ 2）如何在带有浮动的元素上指定最小高度？

Question

所以，我一直在寻找答案一天，但我仍然没有得到答案。 我不太擅长 CSS。

案子

我想创建 2 个相等的正方形（1:1 比例）并排（100% 宽度），并留有一点边距。 在正方形内部，有较小的正方形。 大正方形的min-height应该是大正方形的宽度。

我做了什么

大广场

我做了大广场，它看起来像这样。 尽管它看起来是方形的，但它不是。 比例还不是1:1。 解决此问题的最佳方法是什么？

小广场

我试过了，这就是结果。 小方块的数量不应影响其父级的高度。 我应该怎么做才能解决这个问题？

编码

.html ：

<head>

    <link href="style.css" rel="stylesheet">

</head>

<body>

    <big-box id="left-box" style="background: blue;">
        <small-box style="background: white">
            <div>test</div>
        </small-box>
    </big-box>

    <big-box id="right-box" style="background: green;"></big-box>

</body>

.css ：

big-box {
    background: pink;
    padding: 0.5% 0.5% calc(48% - 4px) 0.5%;
    margin: 2px;
    float: left;
    width: calc(48% - 4px);
    color: white;
    position: relative;
}

small-box {
    padding: 6%;
    float: left;
    background: #f1f1f1;
    margin: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    position: relative;
}

big-box div {
    position: absolute;
}

Answer 1

您是否尝试过使用：纵横比：1 / 1； – 填充让人头疼，因为小框的边距不会改变边界框

.big-box {
aspect-ratio: 1 / 1;
background: pink;
color: white;
float: left;
margin: 2px;
position: relative;
width: calc(48% - 4px);
}

.small-box {
align-items: center;
aspect-ratio: 1 / 1;
background: #f1f1f1;
color: black;
display: flex;
float: left;
justify-content: center;
margin: 0.5% 0.5% calc(48% - 4px) 0.5%;
/* margin: 1%; */
padding: 6%;
position: relative;
}

CSS：1）如何使浮动元素的高度不受子元素的影响？ 2）如何在带有浮动的元素上指定最小高度？

问题描述

案子

我做了什么

大广场

小广场

编码

1 个解决方案

解决方案1
1 已采纳 2022-09-17 16:11:39

CSS：1）如何使浮动元素的高度不受子元素的影响？ 2）如何在带有浮动的元素上指定最小高度？

问题描述

案子

我做了什么

大广场

小广场

编码

1 个解决方案

解决方案1 1 已采纳 2022-09-17 16:11:39

解决方案1
1 已采纳 2022-09-17 16:11:39