Question

在下面的问题（Gutter between divs）中，我从PawełJanicki那里得到了很好的答案。那是差不多4个月前我刚刚重新访问了我使用它的代码，并意识到在IE 11中，当你调整窗口大小时，它不会停留在一条线上，它似乎同时出现！调整IE窗口大小，它从一行开始，然后换行，返回到一行，然后换行......

以下是两张照片。在第一张图片中它看起来很完美，然后我最小化了窗口并且它打破了：

https://i.imgur.com/ueEPzJc.png

https://i.imgur.com/pXP9leB.png

以下是带有示例的codepen：

https://codepen.io/anon/pen/xgZMwq

如果有人可以帮我修复IE中的这种行为，我会非常感激，因为它可以在FF和Chrome中使用它。

提前感谢！

以下是我从旧的SO问题中得到的最终代码：

    .container{
      font-size: 0;
    }
    [class|="col"] {
        display:inline-block;
        vertical-align: top;
        position:relative;
        font-size:20px;

    }
    .col-1-3{
    	width:calc(100%/(3/1));
    }
    .col-2-3{
    	width:calc(100%/(3/2));
    }
    .col-1{
    	width:100%;
    }

    .children-has-gutters{
      margin-left:-15px;
      margin-right:-15px;
      width: calc((100% / (3/1)) + 30px);
    }
    .children-has-gutters > div{
      padding-left:15px;
      padding-right:15px;
      box-sizing: border-box;
    }


    .bg-blue{
    	background-color:#42a5f5;
    	color:#ffffff;
    }
    .bg-green{
    	background-color:#66bb6a;
        color:#ffffff;
    }

    <div class="container">
      <div class="col-1-3 bg-blue">blue left</div>
    	<div class="col-1-3 children-has-gutters" style="font-size:0px;">
        
        <div class="col-1-3">
          <div class="bg-green">green 1</div>
        </div>
        <div class="col-1-3">
          <div class="bg-green">green 2</div>
        </div>
        <div class="col-1-3">
          <div class="bg-green">green 3</div>
        </div>
          
      </div>
    	<div class="col-1-3 bg-blue">blue right</div>
    </div>

Answer 1

尝试使用flex解决方案

.container{
  display:flex;
  }
    .col-1-3{
      flex:1;

    }

   .container{
      font-size: 0;
    }
    [class|="col"] {
        display:inline-block;
        vertical-align: top;
        position:relative;
        font-size:20px;

    }

  .container{
  display:flex;
  }
    .col-1-3{
      flex:1;
    	
    }
    .col-2-3{
    	
    }
    .col-1{
    	width:100%;
    }

    .children-has-gutters{
      margin-left:-15px;
      margin-right:-15px;
     
    }
    .children-has-gutters > div{
      padding-left:15px;
      padding-right:15px;
      box-sizing: border-box;
    }


    .bg-blue{
    	background-color:#42a5f5;
    	color:#ffffff;
    }
    .bg-green{
    	background-color:#66bb6a;
        color:#ffffff;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
      <div class="col-1-3 bg-blue">blue left</div>
    	<div class="col-1-3 children-has-gutters" style="font-size:0px;">
        
        <div class="col-1-3">
          <div class="bg-green">green 1</div>
        </div>
        <div class="col-1-3">
          <div class="bg-green">green 2</div>
        </div>
        <div class="col-1-3">
          <div class="bg-green">green 3</div>
        </div>
          
      </div>
    	<div class="col-1-3 bg-blue">blue right</div>
    </div>

Answer 2

即使其他人偶然发现同样的问题，答案仍然是：

这行代码有两个计算，首先是百分比，然后是px的添加：

width: calc((100% / (3/1)) + 30px);

IE 11似乎无法处理它，并且在错误的时候出错了！你调整浏览器大小，答案是自己计算百分比，如下：

width: calc(33.333% + 30px);

多数民众赞成，闪烁消失。

调整浏览器

2 个答案: