Question

我在一个地方将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（右侧）之间的空白区域。当我这样做时，我会遇到两个问题：

fa和ga的嵌段相互结合
在面板 f 之后，在面板 fa 之后，在面板 ga 与 g 不在同一行时。对于这种情况，我们需要在 fa 和 ga

更多详细信息

对象由4个矩形表示。在不同的时间间隔有3个可能的对象状态。它们在示例中给出。

必须遵守规则：

在f和g之间绝对不应有空格（在所有三个示例中）。您需要将g拉伸到f以填充此空间。
如果高度f大于fa，则fa和ga之间应该有一个空白空间。
如果ga和g的高度不同，则它们应伸展到最大高度。

注意：只能编辑CSS。禁止触摸html。

Answer 1

我已经完成了必要的更改，我想您需要在其他示例中使用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>

Answer 2

您是否可以尝试为类height: 50px;移除固定高度.f。我认为应该可以解决您的问题。

如果没有，您可以尝试将.f和.fa分组为一个div，将.g和.ga分组为另一个。

像这个小提琴中所示 https://jsfiddle.net/ah6f5ozx/4/

使用css

2 个答案: