Question

嘿我在画廊上使用弹性箱网格让第一个div占据2列并使其全部响应。它只是在IE10中工作得很好Flexbox变得疯狂，2柱Div超大，我无法弄清楚原因。

CSS：

.c-showcase {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}
.c-showcase::after {
  clear: both;
  content: '';
  display: table;
}

.c-showcase-quote {
  width: 50%;
  float: left;
}

.c-showcase-item {
  width: 25%;
  float: left;
}
.c-showcase-item::after {
  clear: both;
  content: '';
  display: table;
}

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

.c-showcase-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

img {
  display: block;
  height: auto;
  width: 100%;
}

.c-showcase-quote {
  background: black;
  color: white;
}

HTML：

<div class="c-showcase">
  <div class="c-showcase-block">
    <div class="c-showcase-quote">
      <h2 class="c-showcase-quote__title c-showcase-quote__title_outline_black">BLA BLA BLA</h2>
      <p class="c-showcase-quote__content">blablalbl</p>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
  </div>
</div>

Answer 1

你对弹性儿童不需要float:left;。这个盒子模型。你可能想要的是：

.c-showcase-block {
  display: flex;
  flex-wrap: wrap;
}
.c-showcase-quote {
  flex: 0 0 50%;
}
.c-showcase-item {
  flex: 0 0 25%;
}

此处有前缀版本：

＆＃13;

.c-showcase-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.c-showcase-quote {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
     -moz-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}
.c-showcase-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
     -moz-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
}

＆＃13;

如果您不希望它在所有宽度上应用，请将其包装在媒体查询中。 flex是flex-grow，flex-shrink和flex-basis的简写属性，按此顺序排列。

Flexbox在IE 10中不起作用

1 个答案: