2

我正在使用 Flexbox，我正在尝试创建这样的东西： 在此处输入图像描述

我希望三个“父”框在行内垂直对齐。每个盒子都有不同的高度。

在片段中（Codepen在这种情况下更好，因为堆栈中有字符限制）我试图复制第一个框作为开始，这些框浮动到顶部。它们不是垂直对齐的：

.box, .box-first, .box-large, .box-nested, .box-row {
    position: relative;
    box-sizing: border-box;
    min-height: 1rem;
    margin-bottom: 0;
    background: #007FFF;
    border: 1px solid #FFF;
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.box-nested {
    background: #036;
    border-color: #007FFF;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" rel="stylesheet"/>
<div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row"> <div class="col-xs-12"> <div class="box-first box-container"> <div class="row"> <div class="col-xs-2"> <div class="box-nested"> <img style="width:30px; height:auto;" src="https://cdn0.iconfinder.com/data/icons/simplicity/512/dollar-256.png"/> </div></div><div class="col-xs-5"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">111 222</div><div class="box-nested">105,306</div></div></div></div><div class="col-xs-5"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">111</div><div class="box-nested">222</div></div></div><div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">105,306</div></div></div></div></div></div></div></div></div></div></div></div></div>

当我尝试display: flex; align-items: center;在 CSS 中添加 for 时，它会与嵌套的 div 混淆： 在此处输入图像描述

我对 Flexbox 不是很熟悉，而且我在网上看到过很多没有帮助的不同版本。

4

0 回答 0