CSS：1）如何使浮动元素的高度不受子元素的影响？ 2）如何在带有浮动的元素上指定最小高度？
[英]CSS: 1) how to make height of float element not affected by child element? 2) how to specify min-height on an element with float?
问题描述
So, I have been searching for the answer for a day, but I still do not get the answer.
所以，我一直在寻找答案一天，但我仍然没有得到答案。 I am not very good at CSS.我不太擅长 CSS。
The Case案子
I want to create 2 equal square (1:1 ratio) side-to-side (100% width) with a little bit of margin.我想创建 2 个相等的正方形（1:1 比例）并排（100% 宽度），并留有一点边距。 Inside of the square, there are smaller square(s).在正方形内部，有较小的正方形。 The min-height of the big square should be the width of the big square.大正方形的min-height应该是大正方形的宽度。
What I have done我做了什么
The big square大广场
I have done the big square, and It look like this .我做了大广场，它看起来像这样。 Even though it looks square, it is not.尽管它看起来是方形的，但它不是。 The ratio is still not 1:1.比例还不是1:1。 What is the best approach to fix this?解决此问题的最佳方法是什么？
The small square小广场
I have tried, and this is the result.我试过了，这就是结果。 The quantity of the small square should not affect the height of its parent.小方块的数量不应影响其父级的高度。 What should I do to fix this?我应该怎么做才能解决这个问题？
The code编码
.html : .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 : .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;
}
1 个解决方案
解决方案1
1 已采纳 2022-09-17 16:11:39
have you tried to use: aspect-ratio: 1 / 1;您是否尝试过使用：纵横比：1 / 1； – the padding gives all the headache, as margin for the small box would not change the bounding box – 填充让人头疼，因为小框的边距不会改变边界框
.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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.