在响应式网格中添加额外的边距

时间：2014-04-11 10:36:27

标签： css

我正在创建一个响应式网格来显示图像和其他信息。

我发布了example in codepen。基本上我有 2个问题：

  1. 当我将窗口调整到最小尺寸（1列）时，我得到一个不应存在的右边距。

  2. 独立于大小，最后一行总是有一个底部边距。

    3. 标记如下：

    <div class="wrapper">    
  <div><img src="http://placehold.it/400x200"/></div>
  <div><img src="http://placehold.it/400x200"/></div>
  <div><img src="http://placehold.it/400x200"/></div>
  <div><img src="http://placehold.it/400x200"/></div>
  <div><img src="http://placehold.it/400x200"/></div>
  <div><img src="http://placehold.it/400x200"/></div>    
</div>

    CSS（LESS）是：

    .wrapper {

  background-color: red;
  margin: 0 5%;
  .clear;

  div {

    background-color: green;
    float: left;  

    .make(@count) {

      margin: 0 (6 / (@count - 1) * 1%) (6 / (@count - 1) * 1%) 0;
      width: (94 / @count) * 1%;

      &:nth-child(@{count}n) {margin-right: 0;}

    } // make

    @media screen and (max-width: 480px) {.make(1);}

    @media screen and (min-width: 481px) and (max-width: 768px) {.make(2);}

    @media screen and (min-width: 769px) and (max-width: 1024px)  {.make(3);}

    @media screen and (min-width: 1025px) {.make(4);}

    img {
      display: block;
      max-width: 100%;
      height: auto;
      outline: 0;
    }

  }

}

.clear {

  &:after {
    content: "";
    display: table;
    clear: both;
  } // :after

} // clear

    谢谢你， 米格尔

3 个答案:

答案 0 :(得分：1)

修正正确的保证金问题

如果您检查LESS脚本生成的CSS，您会看到以下内容：

.make(1)：

media screen and (max-width: 480px) {
  .wrapper div {
    margin: 0 Infinity% Infinity% 0;
    width: 94%;
  }
  .wrapper div:nth-child( 1n) {
    margin-right: 0;
  }
}

.make(2)：

@media screen and (min-width: 481px) and (max-width: 768px) {
  .wrapper div {
    margin: 0 6% 6% 0;
    width: 47%;
  }
  .wrapper div:nth-child( 2n) {
    margin-right: 0;
  }
}

对于.make(1)的情况，由于6 / (@count - 1)会导致除以零错误，因此您在LESS中收到错误条件，因此您会看到Infinity%值无效 在CSS中。

在这种情况下，div选择器的CSS规则并不完全有效，因此边距值不是您所期望的。

您可能需要将.make(1)的案例视为一种特殊情况并对CSS进行硬编码 你需要的规则。

您可以使用default()函数和gaurd条件（when）处理LESS中一列的特殊情况。

请参阅以下示例：

http://lesscss.org/functions/#misc-functions-default

修复LESS / CSS的一种方法如下：

.make(1) {
  margin: 0;
}

.make(@count) when (default()) {

  margin: 0 (6 / (@count - 1) * 1%) (6 / (@count - 1) * 1%) 0;
  width: (94 / @count) * 1%;

  &:nth-child(@{count}n)     {margin-right: 0;}

} // make

，结果如下所示：http://codepen.io/anon/pen/DeEhK

修复底部保证金问题

最底层的问题有点棘手。

我默认将底部边距设置为零，然后将上边距设置为所需的值。

然后我会将顶行元素的上边距设置为零。

对于两列的情况，我可能会执行以下操作：

.make(2) {
  margin: (6 / (2 - 1) * 1%) (6 / (2 - 1) * 1%) 0 0;
  width: (94/2)*1%;
  &:nth-child(2n)    {margin-right: 0;}
  &:nth-child(1)     {margin-top: 0;}
  &:nth-child(2)     {margin-top: 0;}      
}

我使用nth-child({1,2})将上边距归零。

对于其他情况（1,3和4列），您需要类似的规则。

选择顶行项目然后选择底行项目更容易，因此使用上边距设置比下边距更容易。

答案 1 :(得分：1)

您可以查看我的PocketGrid微网格框架，它会让您的生活更轻松！ ;）

这是一个纯CSS网格，但您也可以将它与LESS一起使用。

我为你制作了一个CodePen： http://codepen.io/arnaudleray/pen/HgweL?editors=110

HTML 与您的相同：

<div class="wrapper">    
    <div><img src="http://placehold.it/400x200"/></div>
    <div><img src="http://placehold.it/400x200"/></div>
    <div><img src="http://placehold.it/400x200"/></div>
    <div><img src="http://placehold.it/400x200"/></div>
    <div><img src="http://placehold.it/400x200"/></div>
    <div><img src="http://placehold.it/400x200"/></div>    
</div>

然后你可以在LESS文件的开头导入PocketGrid （请让版权所有）：

//@import (less) "http://arnaudleray.github.io/pocketgrid/pocketgrid.css"

/*! PocketGrid 1.1.0
* Copyright 2013 Arnaud Leray
* MIT License
*/
/* Border-box-sizing */
.block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix */
.block-group {
  *zoom: 1;
}
.block-group:before, .block-group:after {
  display: table;
  content: "";
  line-height: 0;
}
.block-group:after {
  clear: both;
}

.block-group {
  /* ul/li compatibility */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Nested grid */
.block-group > .block-group {
  clear: none;
  float: left;
  margin: 0 !important;
}

/* Default block */
.block {
  float: left;
  width: 100%;
}

之后，您可以在LESS文件中设置类： 您的.wrapper必须延长.block-group，并且您的子女div必须延长.block。

body {
  margin: 0;
}

.wrapper {
  &:extend(.block-group);

  background-color: red;

  div {
    &:extend(.block);

    background-color: green;

    img {
      display: block;
      width: 100%;
      height: auto;
      outline: 0;
    }
  }

}

.make(@count) {
  .wrapper div {
    width: (100% / @count);
  }

  // PocketGrid can manage gutters in pixels, percents or even ems...
  @gutter: 10px * @count;

  .block-group { margin: -@gutter 0 0 -@gutter; }
  .block { padding: @gutter 0 0 @gutter; }
} // make


@media screen and (max-width: 480px) { .make(1); }

@media screen and (min-width: 481px) and (max-width: 768px) { .make(2); }

@media screen and (min-width: 769px) and (max-width: 1024px)  { .make(3); }

@media screen and (min-width: 1025px) { .make(4); }

您可以在此处获得有关PocketGrid的更多示例：http://arnaudleray.github.io/pocketgrid/docs/

希望这有帮助！

答案 2 :(得分：0)

您需要做的是在媒体查询中添加一些更改并在HTML中添加类。我已经粘贴了更改后的代码，它可以根据您的需要正常工作。

HTML 

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>CodePen - A Pen by mdmoura</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

  <div class="wrapper">    
  <div><img src="http://placehold.it/400x200"/></div>
  <div><img src="http://placehold.it/400x200"/></div>
  <div><img src="http://placehold.it/400x200"/></div>
  <div class="temp1"><img src="http://placehold.it/400x200"/></div>
  <div class="temp"><img src="http://placehold.it/400x200"/></div>
  <div class="temp"><img src="http://placehold.it/400x200"/></div>    
  </div>

</body>

CSS 

.wrapper {
  background-color: red;
  margin: 0 5%;
    }
.wrapper:after {
   content: "";
   display: table;
   clear: both;
   }
.wrapper div {
   background-color: green;
   float: left;
   }

.wrapper .temp {
   margin: 0 0 0 0;

   }
@media screen and (max-width: 480px) {
  .wrapper div {
     margin: 0 Infinity% Infinity% 0;
     width: 94%;
   }

 .wrapper .temp {
    margin: 0 Infinity% 0 0;

   }
 .wrapper { background-color: white;}

 .wrapper div:nth-child( 1n) {
   margin-right: 0;
    }
  }
 @media screen and (min-width: 481px) and (max-width: 768px) {
  .wrapper div {
   margin: 0 6% 6% 0;
   width: 47%;
  }
 .wrapper div:nth-child( 2n) {
   margin-right: 0;
   }

 .wrapper .temp {
  margin: 0 6% 0 0;    
  }

  }
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .wrapper div {
  margin: 0 3% 3% 0;
  width: 31.33333333%;
 }

 .wrapper .temp {
    margin: 0 3% 0 0;    
   }

 .wrapper .temp1 {
    margin: 0 3% 0 0;    
    }


 .wrapper div:nth-child( 3n) {
    margin-right: 0;
   }
 }
@media screen and (min-width: 1025px) {
 .wrapper div {
 margin: 0 2% 2% 0;
 width: 23.5%;
 }
 .wrapper .temp {
   margin: 0 2% 0 0;    
   }
 .wrapper div:nth-child( 4n) {
  margin-right: 0;
  }
 }
 .wrapper div img {
   display: block; 
   max-width: 100%;      
   height: auto;
   outline: 0;
    }
 .clear:after {
    content: "";
    display: table;
    clear: both;
  }
相关问题
最新问题