根据屏幕大小对齐div

Question

我必须在一个全宽容器中对齐一些div。这些div将根据屏幕大小具有相同的大小。这是现在收到的截图。

我需要移除那个空格并需要相应地对齐div。（我也准备好使用jQuery代码了。）

以下是fiddle

现在指定每个div

的宽度

谢谢。

Answer 1

您可以使用媒体查询和过程宽度。

.wrapper
{
    position: relative;
    width: 100%;
    overflow: auto;
}

.block
{
    float: left;
    width: 25%;
    height: 100px;
    margin: 5px 0;
    border-left: 5px solid pink;
    box-sizing: border-box;
}

这使得块浮动水平。您现在可以使用media queries调整不同的宽度，具体取决于屏幕尺寸。

@media (max-width: 600px) {
  .block {
    width: 15% !important;
  }
}

http://jsfiddle.net/2robteh6/