Question

有人可以查看我的代码并告诉我需要修复哪些内容才能使我的div弹性而不使用flexbox。这是我的code pen

h1 {
  margin:0;
}

.container {
  background-color:blue; 
  padding:1em 0;

  .row {
    background-color:gold; 
    padding:1em 0 0;

    [class*="col-"] {
      border: 1px solid red;
      box-sizing: border-box; 
      float:left;
      width:100%;
    }
  }
  .row:last-child {
    padding-bottom:1em
  }
  .row:before,
  .row:after {
    display: table;
    content: " ";
  }
  .row:after {
    clear:both;
  }
}

.container {
  $base_width: 8px;
  max-width: $base_width * 8 * 12 - $base_width * 2;
  margin:0 auto;

  .row{
    margin:0 -#{$base_width};    
    /*display:flex;    
    align-items: middle;*/

    @for $i from 1 through 12 {
      .col-#{$i} {
        max-width: $base_width * 8 * $i - $base_width * 2;
        margin: 0 $base_width;         
      }
    }    
  }
}

    <div class="container">
    <div class="row">
  <div class="col-6"><h1>1/4</h1></div>
 <div class="col-6">1/4</div>

    </div>  
    <div class="row">
 <div class="col-3">1/4</div>
 <div class="col-3">1/4</div>
 <div class="col-3">1/4</div>
 <div class="col-3">1/4</div>

    </div>      
</div>

Answer 1

尝试使用其他$base_width

$base_width: 100% / 12 / 8;

http://codepen.io/HerrSerker/pen/cgLtF

Answer 2

如果我正确理解了这个问题，将内部div更改为百分比宽度可以得到您想要的布局，即

max-width: 23%;
margin: 0 1%;

示例：http://codepen.io/anon/pen/ArKEo

具有浮动和最大宽度问题的网格系统

2 个答案: