html - 如何正确清除响应式设计中的列？

Question

我正在尝试找出响应式设计并制作了一个包含 4 列的简单布局，每列占 25%。在非常小的情况下，我有一个媒体查询，使它们全部 100% 并且彼此堆叠。

我卡住的地方是中等尺寸(例如 480 像素以上)。我希望四列各占页面的 50%，因此如果我有一行包含四列 div，它将显示 2 x 2。问题是，第三个列不清楚。

这是我的 HTML:

<div class="container">

    <div class="row">
        <div class="four columns"><p>Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns Four columns </p></div>
        <div class="four columns"><p>Four columns2 Four columns2 Four columns2 Four columns2 Four columns2 Four columns2 Four columns2 Four columns2 </p></div>
        <div class="four columns"><p>Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 Four columns3 </p></div>
        <div class="four columns"><p>Four columns4 Four columns4 Four columns4 Four columns4 Four columns4 Four columns4 </p></div>
    </div><!-- /row -->

</div>

这是我的 CSS:

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.container { 
background-color:#fff;
margin:0 auto;
width: 95%;
border:1px solid #ff0000;
}

.row {
float: left;
clear: both;
width: 100%;
}

 .container .columns {
float: left;
padding: 0 16px;
border: 1px solid #ccc;
}

 .clearfix:after,
.container:after {
content: ' ';
display: block;
overflow: hidden;
visibility: hidden;
width:  0;
height: 0;
clear:  both;
}

 .clearfix,
 .container {
zoom:   1;
}

/* 最小尺寸的基本列 /***********************/

.container .columns.one,
.container .columns.two,
.container .columns.three,
.container .columns.four,
.container .columns.five,
.container .columns.six,
.container .columns.seven,
.container .columns.eight,
.container .columns.nine,
.container .columns.ten,
.container .columns.eleven,
.container .columns.twelve,
.container .columns.thirteen,
.container .columns.fourteen,
.container .columns.fifteen,
.container .columns.sixteen,
.container .columns.one-third   {   width: 100%;    }

.container { width: 100%; }

@media 屏幕和(最小宽度:480 像素){

.container .columns.one         {   width: 6.25%;   }
.container .columns.two         {   width: 12.5%;   }
.container .columns.three       {   width: 18.75%;  }
.container .columns.four        {   width: 50%;     }
.container .columns.five        {   width: 31.25%;  }
.container .columns.six         {   width: 37.5%;   }
.container .columns.seven       {   width: 43.75%;  }
.container .columns.eight       {   width: 50%;     }
.container .columns.nine        {   width: 56.25%;  }
.container .columns.ten         {   width: 62.5%;   }
.container .columns.eleven      {   width: 68.75%;  }
.container .columns.twelve      {   width: 75%;     }
.container .columns.thirteen    {   width: 81.25%;  }
.container .columns.fourteen    {   width: 87.5%;   }
.container .columns.fifteen     {   width: 93.75%;  }
.container .columns.sixteen     {   width: 100%;    }
.container .columns.one-third   {   width: 33.333333333333333%;     }

.container {
    width: 95%;
}

@media 屏幕和(最小宽度:800 像素){

.container .columns.one         {   width: 6.25%;   }
.container .columns.two         {   width: 12.5%;   }
.container .columns.three       {   width: 18.75%;  }
.container .columns.four        {   width: 25%;     }
.container .columns.five        {   width: 31.25%;  }
.container .columns.six         {   width: 37.5%;   }
.container .columns.seven       {   width: 43.75%;  }
.container .columns.eight       {   width: 50%;     }
.container .columns.nine        {   width: 56.25%;  }
.container .columns.ten         {   width: 62.5%;   }
.container .columns.eleven      {   width: 68.75%;  }
.container .columns.twelve      {   width: 75%;     }
.container .columns.thirteen    {   width: 81.25%;  }
.container .columns.fourteen    {   width: 87.5%;   }
.container .columns.fifteen     {   width: 93.75%;  }
.container .columns.sixteen     {   width: 100%;    }
.container .columns.one-third   {   width: 33.333333333333333%;     }

.container {
    width: 95%;
}

Answer 1

您可以将 float 属性替换为 display: inline-block;

这会将您的元素置于内联(彼此并排)，同时保留 block 元素的大小属性。

因此，在您的列上设置 25% 的宽度会使它们彼此并排放置，并使它们保持在页面流中，这与 float 不同。

放入媒体查询将它们更改为 50% 宽度，它们将自动换行到有足够空间容纳它们的下一行。

请注意，您可能需要使用 vertical-align: top; 来防止它们在基线处对齐。 (我真的觉得这应该是默认的，但是哦好吧)

查看演示:

http://jsfiddle.net/DuGde/