我在一个地方将4个不同高度的积木存放在一个问题上。
您可以通过链接https://jsfiddle.net/inthedark122/ncvjaeqy/1/
观看我的演示HTML代码:
<div>---- You can change only css styles!!!</div>
<div>---- height - height - what is affixed is for understanding the content, in the original height is unknown in all cases
We know only width = 48 for ga и fa, the content on the right (f and g) should occupy all the remaining space as done in the example</div>
<div>
---- The content of 4 blocks at any time may change, because these 3 cases must be considered as one, but at a different time
</div>
<div>There shouldn’t be any empty space between f and g, there shouldn’t be any space between fa / ga, you need to stretch g to f to fill this spaceо</div>
<div class="root">
<div class="fa">fa</div>
<div class="f">f</div>
<!-- <div class="g-root"> -->
<div class="ga">ga</div>
<div class="g">g</div>
<!-- </div> -->
</div>
<div>
Empty space should not be between f and g, between fa / ga empty space should be, ga should be on the same level with g
</div>
<div class="root">
<div class="fa">fa</div>
<div class="f" style="height: 150px;">f</div>
<!-- <div class="g-root"> -->
<div class="ga">ga</div>
<div class="g">g</div>
<!-- </div> -->
</div>
<div>
The height of the lower blocks should be aligned with the maximum height ga or g
</div>
<div class="root">
<div class="fa">fa</div>
<div class="f" style="height: 150px;">f</div>
<!-- <div class="g-root"> -->
<div class="ga" style="height: 200px;" >ga</div>
<div class="g">g</div>
<!-- </div> -->
</div>
CSS代码:
body {
padding: 0;
margin: 0;
}
.root {
display: flex;
flex-wrap: wrap;
color: white;
position: relative;
}
.g-root {
display: flex;
width: 100%;
}
.fa {
height: 128px;
/* position: absolute; */
z-index: -1;
background-color: grey;
}
.f {
height: 50px;
background-color: red;
/* flex: 1; */
/* width: 100%; */
width: calc(100% - 48px);
/* margin-left: 48px; */
/* margin-bottom: 128px; */
}
.g {
height: 180px;
background-color: blue;
flex: 1;
}
.ga {
border-top: 1px solid white;
background-color: black;
/* margin-top: -128px; */
}
.fa, .ga {
width: 48px;
color: white;
}
我尝试使用绝对位置和浮点数,但是我在f和g之间有空白,或者块“ ga”与g不在同一行。
请检查演示中的所有评论,以更好地了解我的问题
UPD1:
主要目标是消除f和g(右侧)之间的空白区域。当我这样做时,我会遇到两个问题:
更多详细信息
对象由4个矩形表示。 在不同的时间间隔有3个可能的对象状态。它们在示例中给出。
必须遵守规则:
注意: 只能编辑CSS。禁止触摸html。
答案 0 :(得分:0)
我已经完成了必要的更改,我想您需要在其他示例中使用flex
属性。希望对您有所帮助-:
https://jsfiddle.net/e96cprb2/
body {
padding: 0;
margin: 0;
}
.root {
display: flex;
height: 150px;
}
.a-root{
display: flex;
flex-direction: column;
flex: 1;
}
.g-root{
display: flex;
flex-direction: column;
flex: 5;
}
.fa{
display: flex;
background: red;
flex: 1;
}
.ga{
display: flex;
background: grey;
flex: 1;
}
.f{
display: flex;
background: blue;
flex: 1
}
.g{
display: flex;
background: black;
flex: 5
}
<div>---- You can change only css styles!!!</div>
<div>---- height - height - what is affixed is for understanding the content, in the original height is unknown in all cases
We know only width = 48 for ga и fa, the content on the right (f and g) should occupy all the remaining space as done in the example</div>
<div>
---- The content of 4 blocks at any time may change, because these 3 cases must be considered as one, but at a different time
</div>
<div>There shouldn’t be any empty space between f and g, there shouldn’t be any space between fa / ga, you need to stretch g to f to fill this spaceо</div>
<div class="root">
<div class="a-root">
<div class="fa">fa</div>
<div class="ga">ga</div>
</div>
<div class="g-root">
<div class="f">f</div>
<div class="g">g</div>
</div>
</div>
<div>
Empty space should not be between f and g, between fa / ga empty space should be, ga should be on the same level with g
</div>
<div class="root">
<div class="a-root">
<div class="fa">fa</div>
<div class="ga">ga</div>
</div>
<div class="g-root">
<div class="f">f</div>
<div class="g">g</div>
</div>
</div>
<div>
The height of the lower blocks should be aligned with the maximum height ga or g
</div>
<div class="root">
<div class="a-root">
<div class="fa">fa</div>
<div class="ga">ga</div>
</div>
<div class="g-root">
<div class="f">f</div>
<div class="g">g</div>
</div>
</div>
答案 1 :(得分:0)
您是否可以尝试为类height: 50px;
移除固定高度.f
。我认为应该可以解决您的问题。
如果没有,您可以尝试将.f
和.fa
分组为一个div
,将.g
和.ga
分组为另一个。
像这个小提琴中所示 https://jsfiddle.net/ah6f5ozx/4/