Question

所以，我正在努力做到以下几点：

将bootstrap中的列设置为相同的高度，无论内容如何
然后，垂直对齐以使这些列中的内容居中
并且，使所有跨浏览器兼容（IE的最小阈值，10 +）

使用flexbox，前两个步骤非常简单，但是在我的browserstack测试中，它们使IE 10+上的内容看起来不正常。

有人知道怎么做吗？这是我当前代码的codepen，它在browserstack上有问题：http://codepen.io/myriad1729/pen/JRGVZO（下面是HTML / CSS）

你会发现它可以在任何现代浏览器上运行，但是在IE11上，第二列基本上似乎被推下了一排，使得一切看起来都很好，不是很好，鲍勃。

我真的很感激，如果有任何人有任何见解，是否有一个简单的一站式解决方案，我忽略了，如果我的CSS中有问题导致IE10 / 11上的问题，或者如果解决方案是选择性地针对IE10 / 11并做某事。

谢谢！

CSS / HTML：

// And add in pertinent Bootstrap CSS

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

[class*="col-"] {
  display: flex;
  flex-direction: column;
}

.itemSource {
  margin: 0;
}

h2 {
  margin-top: 4rem;
  font-size: 1.2em;
  letter-spacing: 0;
  margin-bottom: 2rem;
  text-transform: uppercase;
  color: #555;
  font-weight: 300;
}

p {
  font-size: 1em;
  font-weight: 400;
}

<section class="listEntries">
  <div class="row"> <!-- Caleb -->
    <div class="col-xs-offset-3 col-xs-6 col-sm-offset-4 col-sm-4 col-md-offset-1 col-md-3 col-lg-offset-2 col-lg-2">
      <img src="http://c51e0534b271998a1a94-58706dfbc342bfcb8f938b36c845fe8a.r14.cf1.rackcdn.com/uploads/first-person-sharing-our-story.jpg" class="img-circle img-responsive">
    </div>
    <div class="col-xs-12 col-sm-offset-1 col-sm-10 col-md-offset-0 col-md-8 col-lg-6">
      <div class="itemSource">
        <h2><strong>George Costanza</strong> Director</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum bibendum justo, et gravida orci bibendum in. Nunc ornare nulla non eros ultrices vestibulum. Suspendisse vitae libero in ligula laoreet sodales. Vivamus in tortor et nulla euismod congue. Phasellus nec semper tellus. Sed sagittis magna id orci placerat, eget aliquet ante tincidunt. Suspendisse vitae mattis elit, in aliquam sem. Nunc efficitur finibus lorem, eu lobortis ante condimentum id. Aenean id augue ut turpis tincidunt viverra.
        </p>
      </div>
    </div>
  </div>
</section>

Answer 1

我对此问题使用此解决方案

没有JavaScript。

我在this link找到了它。

<div class="row row-flex row-flex-wrap">
    //Your well code
</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;
}

希望这会有所帮助。

可以强制自举柱到相同的高度和垂直对齐div + crossbrowser支持

1 个答案: