0

我有一个 drupal 视图，它可以拉出项目屏幕截图并将它们放入 div 中，我想知道 CSS 中是否有一种聪明的方法可以将它们对齐成一行 3 列并留有边距，而无需单独设置每个框的样式。

第一行样式很容易，因为我可以给 div-even 左右边距，但是第 2 行我需要给 div-odd 一个边距，而偶数 div 没有边距

我已经创建了我所在位置的 J fiddle Mockup。我可以设置第一个和最后一个 div 的样式，也可以给奇数和偶数一个规则，但是因为我不知道它们的项目屏幕截图如何，我不想单独设置每个 div 框的样式

http://jsfiddle.net/eGWY6/

4

3 回答 3

0

你可以这样解决这个问题：

jQuery：

// Remove margin on third project screen shot
if($("#projects-wrapper div").length){
  $("#projects-wrapper div").each(function(i){
    var remainder = (i + 1) % 3; //3th change to your needs
    if(remainder === 0){
      $(this).addClass("last");
    }
  });
}

CSS：

.last {margin-right: 0;}
于 2012-08-17T11:03:06.523 回答
0

嘿，现在像这样定义 css

.view-last{
margin-right:0;
}
.view-4{
margin-left:0;
}

演示

于 2012-08-17T11:11:08.747 回答
0

看看这个小提琴，我认为这就是你要找的东西。如果你以百分比给出宽度，那么放置它们会很容易。

http://jsfiddle.net/eGWY6/7/

现在你可以用奇数或偶数命名备用 div 并设置它们的样式。就这么简单

于 2012-08-17T11:12:27.670 回答