0

我试图弄清楚响应式设计并制作了一个简单的布局，有 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 screen and (min-width:480px) {

.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 screen and (min-width:800px) {

.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%;
}

}

4

1 回答 1

1

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

这会将您的元素内联（彼此并排），同时保留块元素的大小属性。

因此，在列上设置 25% 的宽度会将它们全部并排放置，并将它们保持在页面流中，而不是浮动。

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

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

见演示：

http://jsfiddle.net/DuGde/

于 2013-10-22T02:24:55.170 回答