在响应网格中垂直对齐框的内容（为所有框设置相同的高度）

Question

我正在使用响应式网格，我希望每个盒子的所有内容都垂直对齐。每个框将具有不同的内容（结构）位置。在这种情况下（现在），我有两个盒子，它们分别工作正常。当我将它们包含在网格中时，网格不再响应。

例如，第一个框将如下所示：

，第二个框将如下所示：

所以，远...我已经构建了主网格，我正在尝试使用第一个框模板对齐项目。我正在努力寻找最佳解决方案。我猜这个改变与.example-feature-staggered-row：

有关

h1,h2{letter-spacing:-.04em;text-align:center;line-height:1.2em}h1,h2,h3{text-align:center}h1,h2,h4{line-height:1.2em}h3,h4{margin-bottom:12px;letter-spacing:-.03em}h2,h5{margin-bottom:16px}h3,h5{line-height:1.3em;margin-top:0}h1,h2,h3,h4,h5,h6{font-family:'Circular Medium',sans-serif;font-weight:500}h6,p{margin-bottom:10px}h2,h3,h4,h5,h6{margin-top:0}h1{font-size:3.875em}h2{font-size:2.75em}h3{font-size:2em}h4{font-size:1.375em}h5{font-size:1.25em;letter-spacing:-.02em}h6{font-size:.875em;line-height:1.4em}.grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:-16px;margin-left:-16px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.grid.gutter--small{margin-right:-8px;margin-left:-8px}.grid.no-gutter{margin-right:0;margin-left:0}.grid.justify--center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.example-body,.example-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;-webkit-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal}.example-body{display:flex;margin-bottom:64px;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;border-radius:6px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 6px 12px 0 rgba(0,0,0,.1)}.example-body.orange{background-color:#F2987D;color:#fff}.example-body.green{background-color:#E9F0E0;color:#000}.example-body.lightblue{background-color:#00a7f7;color:#00a7f7}.example-center{display:flex;min-height:512px;padding:48px;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;color:#fff}.example-features-figure,.example-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-header{display:flex;margin-bottom:102px;padding-right:32px;padding-left:32px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.example-features-figure{display:flex;width:60px;height:60px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;border-radius:999px;background-color:#a4d7a5}.example-feature-columns,.example-fluid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-features-text{padding-left:16px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.example-feature-title{margin-bottom:8px;text-align:left}.example-feature-subtitle,.example-logo{margin-bottom:0}.example-feature-title.reversed{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:right}.example-feature-title.centered{text-align:center}.example-feature-subtitle.reversed{text-align:right}.example-feature-subtitle.centered{text-align:center}.example-logo{margin-top:0;text-transform:uppercase}.example-wrapper{padding-right:32px;padding-bottom:32px;padding-left:32px;background-color:#eef1f3}.example-wrapper.cyan{background-color:#dff7fa}.example-wrapper.blue{background-color:#e2f2fe}.example-wrapper.orange{background-color:#fff3df}.example-wrapper.deeppurple{background-color:#ede7f6}.example-wrapper.purple{background-color:#f3e5f5}.example-wrapper.red{background-color:#ffebee}.example-wrapper.teal{background-color:#dff2f1}.example-wrapper.pink{background-color:#fde4ec}.example-wrapper.green{background-color:#e8f5e9}.example-wrapper.lightblue{background-color:#e0f5ff}.example-wrapper.amber{background-color:#fff8e0}.example-fluid{display:flex;min-height:600px;padding:16px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.example-center-title{margin-bottom:0;text-align:center}.example-center-figure{margin-bottom:12px}.example-equal-height-caption{padding:16px;font-size:.875em;line-height:1.5em}.example-feature-columns{display:flex;padding:32px 16px;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.example-feature-column,.example-feature-column-figure{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-feature-column{display:flex;padding-right:16px;padding-bottom:12px;padding-left:16px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.example-feature-column.sibling{-webkit-box-flex:0;-webkit-flex:0px;-ms-flex:0px;flex:0px;border-left:1px solid #63bc66}.example-feature-column-figure{display:flex;width:100px;height:100px;margin-bottom:16px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-radius:999px;background-color:#a4d7a5}.example-feature-staggered,.example-feature-staggered-row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-feature-staggered{display:flex;padding:0 40px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.example-feature-staggered-row{display:flex;padding-top:32px;padding-bottom:32px;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:1.25em;line-height:1.4em}.example-feature-staggered-figure,.example-grid-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-feature-staggered-row.sibling{border-top:1px solid #63bc66}.example-feature-staggered-row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.example-feature-staggered-figure{display:flex;width:160px;height:160px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;border-radius:999px}.example-feature-staggered-text{padding-right:24px;padding-left:24px}.example-grid{padding:32px 32px 12px}.example-grid-container{display:flex;margin-right:-8px;margin-left:-8px;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.cover-wrapper{position:relative;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:80px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media (max-width:991px){.cover-wrapper,.section-header{margin-bottom:64px}.grid{margin-right:-12px;margin-left:-12px}.grid.tablet-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.example-center{min-height:480px}.example-header{padding-right:24px;padding-left:24px}.example-equal-height{min-height:400px;padding:48px 40px;font-size:14px;line-height:1.5em}.example-fluid,.example-hero{min-height:480px;line-height:1.5em}.example-equal-height-figure{height:140px}.example{padding-top:64px}.example-features-figure{width:48px;height:48px}.example-features-text{padding-left:12px}.example-wrapper{padding-right:24px;padding-bottom:0;padding-left:24px}.example-fluid{padding:12px;font-size:14px}.example-feature-columns{padding:24px 12px;font-size:14px;line-height:1.5em}.example-feature-column{padding-bottom:6px}.example-feature-column-figure{width:80px;height:80px}.example-feature-staggered{padding-right:24px;padding-left:24px;font-size:12px}.example-grid,.example-hero{font-size:14px}.example-feature-staggered-row{padding-top:24px;padding-bottom:24px}.example-feature-staggered-figure{width:120px;height:120px}.cover-item{-webkit-flex-basis:19%;-ms-flex-preferred-size:19%;flex-basis:19%}.example-hero{padding:12px}.example-hero-figure{width:128px;height:128px}}@media (max-width:767px){h3,h4,h5{margin-bottom:8px}body{font-size:14px;line-height:1.4em}h1{font-size:2.75em}h2{margin-bottom:12px;font-size:2em}h3{font-size:1.5em}.section-description,h4{font-size:1.25em}.section.padded{padding:48px 16px}.container.large.shifted,.container.medium.shifted{margin-top:-64px}.grid{margin-right:-8px;margin-left:-8px}.grid.mobilel-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.example-body{margin-bottom:32px}.example-center{min-height:320px;padding:22px}.example-header{margin-bottom:64px;padding-right:16px;padding-left:16px}.example-equal-height{min-height:0;padding:24px 16px;font-size:10px;line-height:1.4em}.example-equal-height-figure{height:120px}.cover-title{margin-bottom:16px}.cover-subtitle{margin-bottom:32px;font-size:1.25em}.section-header{margin-bottom:48px}.expander-body{margin-top:16px;margin-bottom:16px}.example-features-figure{width:32px;height:32px;padding:8px}.example-features-text{padding-left:8px}.example-feature-title{margin-bottom:4px}.example-wrapper{padding-right:16px;padding-left:16px}.example-fluid{min-height:320px;padding:8px;font-size:10px;line-height:1.4em}.example-center-figure{width:64px;height:64px}.example-equal-height-caption{padding:12px}.example-feature-columns{padding:16px 8px;font-size:11px}.example-feature-column-figure{width:64px;height:64px;margin-bottom:8px;padding:16px}.example-feature-staggered{padding-right:16px;padding-left:16px;font-size:10px}.example-feature-staggered-row{padding-top:16px;padding-bottom:16px}.example-feature-staggered-figure{width:96px;height:96px;padding:24px}.example-grid{padding:16px 16px 4px}.example-grid-container{margin-right:-6px;margin-left:-6px}.cover-item{-webkit-flex-basis:24%;-ms-flex-preferred-size:24%;flex-basis:24%}.logos-text{margin-bottom:12px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.cover-logo{position:absolute;left:0;top:0;right:0;z-index:2000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:120px;height:48px;margin-right:auto;margin-left:auto;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.cover-logo-image{opacity:.6}}@media (max-width:479px){h1{font-size:2em}h2{font-size:1.75em}.grid.mobile-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.cover{padding:1rem;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.example-body{margin-bottom:16px;border-radius:4px}.example-center{min-height:240px;padding:16px;font-size:12px}.example-header{padding-right:12px;padding-left:12px}.example-equal-height{padding:12px 8px;font-size:8px}.example-equal-height-card{margin-right:4px;margin-left:4px;border-radius:2px}.example-equal-height-figure{height:80px;padding-right:24px;padding-left:24px}.section-header{margin-bottom:48px}.example-features-text{padding-left:6px}.example-wrapper{padding-right:12px;padding-left:12px}.example-fluid{min-height:240px;padding:6px;font-size:6px}.example-equal-height-caption{padding:6px}.example-feature-columns{padding-top:12px;padding-bottom:12px;font-size:10px}.example-feature-column{padding-right:12px;padding-bottom:0;padding-left:12px}.example-feature-column-figure{width:48px;height:48px;padding:12px}.example-feature-staggered{padding-right:12px;padding-left:12px;font-size:8px}.example-feature-staggered-row{padding-top:12px;padding-bottom:12px}.example-feature-staggered-figure{width:64px;height:64px;padding:16px}.example-feature-staggered-text{padding-right:12px;padding-left:12px}.example-grid{font-size:12px}.example-grid-container{margin-right:-4px;margin-left:-4px}.cover-wrapper{margin-bottom:32px}}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-xs-6 col-md-4">
          <div class="example-body green">
             <div class="example-feature-staggered">
                <div class="example-feature-staggered-row">
                   <div class="example-feature-staggered-figure"><img src="https://cdn0.iconfinder.com/data/icons/simplicity/512/dollar-256.png" width="76"></div>
                   <div class="example-feature-staggered-text">
                      <p class="example-feature-title">111 111</p>
                      <h3 class="example-feature-subtitle">3.2M</h3>
                   </div>
                   <div class="example-feature-staggered-text">
                      <p class="example-feature-title">333</p>
                      <h3 class="example-feature-subtitle">-10%</h3>
                   </div>
                </div>
             </div>
          </div>
  </div>
  <div class="col-xs-6 col-md-4">
          <div class="example-body green">
             <div class="example-feature-staggered">
                <div class="example-feature-staggered-row">
                   <div class="example-feature-staggered-text">
                      <h3 class="example-feature-subtitle">111</h3>
                      <h3 class="example-feature-subtitle">222</h3>
                      <h3 class="example-feature-subtitle">333</h3>
                   </div>
                   <div class="example-feature-staggered-text">
                      <h3 class="example-feature-subtitle"><b>AAA</b></h3>
                      <h3 class="example-feature-subtitle"><b>BBB</b></h3>
                      <h3 class="example-feature-subtitle"><b>BBB</b></h3>
                   </div>
                </div>
             </div>
          </div>
  </div>
  <div class="col-xs-6 col-md-4">
    <div class="example-body orange">
        <div class="example-feature-staggered">
            <div class="example-feature-staggered-row">
                <div class="example-feature-staggered-figure"><img src="https://cdn4.iconfinder.com/data/icons/dot/256/man_person_mens_room.png" width="96"></div>
                <div class="example-feature-staggered-text">
                    <p class="example-feature-title">111 111</p>
                    <h3 class="example-feature-subtitle">105,306</h3>
                </div>
                <div class="example-feature-staggered-text">
                    <p class="example-feature-title">333333</p>
                    <h3 class="example-feature-subtitle">-44%</h3>
                </div>
            </div>
            <div class="example-feature-staggered-row">
                <div class="example-feature-staggered-figure"><img src="https://cdn4.iconfinder.com/data/icons/developer-set-3/128/arrowupright-256.png" width="76"></div>
                <div class="example-feature-staggered-text">
                    <p class="example-feature-title">22222</p>
                    <h3 class="example-feature-subtitle">35.05%</h3>
                </div>
                <div class="example-feature-staggered-text">
                    <p class="example-feature-title">- </p>
                    <h3 class="example-feature-subtitle">+6%</h3>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

我想在这里考虑最好的解决方案。例如。该表可能是一个解决方案。使用两列（用于第一个模板）。每列将有两行，其中项（文本和图像）将垂直对齐。第一列的行将具有子表。每个子表将有两列。第一列将显示图像。第二列将包含两行文本。这是一个好主意吗？或者更好的是找到一种更快速响应的方式来实现这一目标？

另外，盒子还可以。我只是不能让它们在网格中没有问题（高度不一样。如果我使它相同，内容并不总是垂直对齐）。

Answer 1

使用当前设置，您需要在某些断点处添加媒体查询以重新设置内容。 你给了很多固定宽度的元素并将它们设置为flex: 0 0 auto;，这将阻止它们在给定宽度以下收缩。

此外，您可以从简化代码中受益。

您可以使用flex容器创建此布局。以下是这可能是什么样子的粗略示例。

＆＃13;

＆＃13;

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: calc(50% - 40px);
  background: #e9f0e1;
  min-height: 100px;
  min-width: 100px;
  margin: 20px;
}

.one {
  background: #f09880;
}

.three {
  background: #e9f0e1;
}

.content {
  padding: 10px;
  margin: 10px;
  background: seagreen;
  color: white;
}

@media screen and (max-width: 500px) {
  .wrap {
    display: block;
  }
}

@media screen and (max-width: 360px) {
  .container {
    display: block;
  }
  .wrap {
    width: calc(100% - 40px);
  }
}

＆＃13;

<div class='container'>
  <div class='wrap one'>
    <div class='item'>
      Icon
    </div>
    <div class='item'>
      Text
    </div>
    <div class='item'>
      Text
    </div>
  </div>
  <div class='wrap two'>
    <div class='item'>
      <div class='content'>
        one
      </div>
      <div class='content'>
        two
      </div>
    </div>
    <div class='item'>
      <div class='content'>
        one
      </div>
      <div class='content'>
        two
      </div>
    </div>
    <div class='item'>
      <div class='content'>
        one
      </div>
      <div class='content'>
        two
      </div>
      <div class='content'>
        three
      </div>
    </div>
  </div>
  <div class='wrap three'>
    <div class='item'>
      Icon
    </div>
    <div class='item'>
      <div class='content'>
        Text
      </div>
      <div class='content'>
        Text
      </div>
    </div>
    <div class='item'>
      <div class='content'>
        Text
      </div>
      <div class='content'>
        Text
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;