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