Question

如何让容器背景在列中每个网格项的不同文本长度上均匀填充高度？

SCSS：

.use-case-block-container{
  margin: 15px;
}
.use-case-block{
  margin: 15px;
  display: block;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  background: rgba(0,0,0,0.32);
}

HTML

 <div class="row">
      <hr>
      <h2>Use Cases</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      <div class="row">
        <div class="col-md-12">
        <div class="row">
              <div class="col-xs-6 col-md-6 ">
                <div class="use-case-block-container">
                  <div class="use-case-block">
                  <a href="/use_cases">CUSTOMER EXPOSURE</a>
                  </div>
                </div>
              </div>

              <div class="col-xs-6 col-md-6 ">
                <div class="use-case-block-container">
                  <div class="use-case-block">
                  <a href="/use_cases">CUSTOMER ACTIVITY HISTORY</a>
                  </div>
                </div>
              </div>

        </div>
        <div class="row">
              <div class="col-xs-6 col-md-6 ">
                <div class="use-case-block-container">
                  <div class="use-case-block">
                  <a href="/use_cases">CUSTOMER DATA GOVERNANCE</a>
                  </div>
                </div>
              </div>

              <div class="col-xs-6 col-md-6 ">
                <div class="use-case-block-container">
                  <div class="use-case-block">
                  <a href="/use_cases">DATA LINEAGE</a>
                  </div>
                </div>
              </div>

        </div>
        <div class="row">
              <div class="col-xs-6 col-md-6 ">
                <div class="use-case-block-container">
                  <div class="use-case-block">
                  <a href="/use_cases">AUTOMATED ACCESS OF UNSTRUCTURED DATA</a>
                  </div>
                </div>
              </div>

              <div class="col-xs-6 col-md-6 ">
                <div class="use-case-block-container">
                  <div class="use-case-block">
                  <a href="/use_cases">REGULATORY COMPLIANCE – SIFI</a>
                  </div>
                </div>
              </div>

        </div>
        <div class="row">
              <div class="col-xs-6 col-md-6 ">
                <div class="use-case-block-container">
                  <div class="use-case-block">
                  <a href="/use_cases">REGULATORY COMPLIANCE – CCAR</a>
                  </div>
                </div>
              </div>

              <div class="col-xs-6 col-md-6 ">
                <div class="use-case-block-container">
                  <div class="use-case-block">
                  <a href="/use_cases">REGULATORY COMPLIANCE – POST TRADE COMMUNICATIONS</a>
                  </div>
                </div>
              </div>

        </div>
        <div class="row">
              <div class="col-xs-6 col-md-6 ">
                <div class="use-case-block-container">
                  <div class="use-case-block">
                  <a href="/use_cases">PII DATA IDENTIFICATION AND LOCATION</a>
                  </div>
                </div>
              </div>
              <div class="col-xs-6 col-md-6 ">
                <div class="use-case-block-container">
                  <div class="use-case-block">
                  <a href="/use_cases">COMPREHENSIVE DATA REPAIR</a>
                  </div>
                </div>
              </div>
        </div>
        </div>
      </div>
    </div>

结果：

问题是每一行项目的每一侧都应该有相同的块填充。例如，如果其中一个项目有3行而不是2行，则每个块应调整为3行高度而不是2或1.这样所有容器的大小和响应都相同。

Answer 1

你总是可以在js中循环遍历它们，找到最大的一个并为其他所有人分配这个高度。

但是，我认为在min-height中设置一些合理的css默认值会更容易。

Answer 2

如果你不想使用JS，你可以使用flexbox相等的列高度：

列容器将是：

display：flex;

快速搜索flexbox相等的列高度。

Answer 3

您需要为所有.use-case-block-container设置适当的固定高度，并在文字高度发生变化时使用媒体查询断点调整固定高度。

每个.use-case-block-container也可以display: flex; align-items: center; justify-content: center;用于文本的垂直和水平居中。

使用不同大小的文本同等地填充父容器背景

3 个答案: