Question

我正在尝试找出响应式设计，并使用4列进行简单布局，每列各25％。在一个非常小的尺寸，我有一个媒体查询，使他们都100％，他们堆叠在一起。

我被困在中等大小（例如480px以上）。我希望四列各占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%;
}

}

Answer 1

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

这会将元素内联（彼此相邻），同时保留块元素的大小调整属性。

因此，在列上放置25％的宽度会使它们彼此相邻，并将它们保留在页面流中，与浮动不同。

放入媒体查询将其更改为50％宽度，它们将自动分解到下一行，该行有足够的空间来容纳它们。

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

参见演示：

http://jsfiddle.net/DuGde/

如何使响应式设计中的列清晰正确？

1 个答案: