Question

大家好，我有一个小问题。

我目前正在开发一个具有自定义布局的项目。图片是我发现问题所在的布局的一部分。

我需要制作网站的一部分，在左侧，中间和右侧放置产品。目前，我的编码如下：

<div class="container-fluid">
  <div class="row">
    <div class="col-12 offset-lg-1 col-lg-3 product-left">
      <div class="card"></div>
    </div>
    <div class="col-12 col-lg-4 product-middle">
      <div class="card pm-first"></div>
      <div class="card pm-second"></div>
    </div>
    <div class="col-12 col-lg-3 product-right">
      <div class="card"></div>
    </div>
  </div>
</div>

我只是不知道如何确定，中间的两个产品始终具有相等的高度，左右两个的高度相同。

我希望有人能帮助我，但我暂时看不到它，对于这个菜鸟问题：D

Answer 1

尝试一下

将"row-flex row-flex-wrap"类添加到您的行

<div class="container-fluid">
    <div class="row row-flex row-flex-wrap">
        <div class="col-12 offset-lg-1 col-lg-3 product-left">
            <div class="card"></div>
        </div>
        <div class="col-12 col-lg-4 product-middle">
            <div class="card pm-first"></div>
            <div class="card pm-second"></div>
        </div>
        <div class="col-12 col-lg-3 product-right">
            <div class="card"></div>
        </div>
    </div>
</div>

CSS文件

.row-flex, .row-flex > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 1 auto;
}
.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex: 0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
    margin: -.2px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div, .row-flex > div[class*='col-'] div {
    width:100%;
}
.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}
.flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
}

自举柱高度相等

1 个答案: