Question

我的问题很复杂。

在我的布局中，我有一个左列和一个右列。例如，宽度为30％和70％。在他们下面是另一个项目，现在是挑战：

如果我的30％列高于70％列，则“挑战栏”应填充在右侧。如果右侧较高，则“挑战块”应位于底部，宽度为100％。

在这里我举一个例子：

https://jsfiddle.net/by6tkg7L/

绿色代码应位于此代码的右侧。

我尝试过

flex-grow

在这种情况下，还可以尝试使用网格（不要尝试使用网格，所以似乎我需要先阅读更多内容）

我也愿意接受像同位素这样的砖石布局，但是到目前为止，还没有找到其他方法可以使它充满或根据其他情况而增长。

我当然更喜欢仅使用CSS的方式，并且希望避免使用JS进行计算。

提前预订

Answer 1

仅CSS解决方案。工作提琴：https://jsfiddle.net/by6tkg7L/1/

要想看到它起作用，您必须更改蓝色块的高度（类 .right_top ）。

我只修改了css，我在子元素上使用了block和inline-block（带有float: left），并且仅在上设置了flex问题元素设置min-width和max-width而不是静态width。

CSS：

.wrapper{
    display: block;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
}
.left{
    background-color: red;
    height: 500px;
    width: 30%;
    display:inline-block;
    float:left;
}
.right_top{
    background-color: blue;
    height: 500px;
    width: 70%;
    display:inline-block;
    float:left;
}
.question{
    min-width: 70%;
    width: auto;
    max-width: 100%;
    background-color: green;
    height: 300px;
    display:flex;
}

HTML：

<div class="wrapper">
    <div class="left">
    </div>
    <div class="right_top">
        </div>
    <div class="question">
    </div>
</div>

尽可能使div适合空格，否则增大大小

1 个答案: