以百分比设置边距

Question

我有这段代码，它工作得很好，唯一我想不通的是让所有方块之间的间距相等。也许代码比文字更好地解释了它。作为示例，这里有一个固定像素布局为 1465 像素宽度的模型。 Mockup site

<div class="Content">
  <div class="ContLft">
    <div class="itemXL">
      <div class="itemXLcnt"></div>
    </div>
  </div>
  <div class="ContRght">
    <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
  </div>
</div>

/css/

.Content {
display: block;
width: 100%;
}

.ContLft {
float: left;
margin-right: 1.37305%;
width: 48.6269%;
}

.ContRght {
float: left;
width: 50%;
}

.itemXL {
background-color: #f4f4f4;
margin-bottom: 24px;
margin-right: 24px;
padding: 24px;
position: relative;
width: 100%;
}

.itemXL:before{
content: "";
display: block;
padding-top: 100%;  /* initial ratio of 1:1*/
}

.itemL::before {
content: "";
display: block;
padding-top: 100%;
}

.itemL {
background-color: #f4f4f4;
float: left;
margin-bottom: 2.7461%;
margin-left: 2.7461%;
padding: 24px;
width: 47.2539%;
}

.itemLcnt {
position:relative;  
}

.itemXLcnt {
position:relative;
}

Answer 1

几件事：

正如 Drew 指出的那样，您的标记缺少 div 的结束标记。
您需要在较小的项目上使用右边距
那些较小的项目太宽，这迫使他们将每个项目换行而不是您想要的外观。
可能还有其他原因，但粘贴起来更容易工作。 :-P

Divs：

<div class="Content">
  <div class="ContLft">
    <div class="itemXL">
      <div class="itemXLcnt"></div>
    </div>
    </div>
  <div class="ContRght">
    <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
     <div class="itemL">
      <div class="itemLcnt"></div>
    </div>
  </div>
</div>

样式：

.Content {
     display: block;
     overflow: auto;
     width: 100%;
}

.ContLft {
     float: left;
     margin-right: 1.37305%;
     width: 48.6269%;
}

.ContRght {
     float: left;
     width: 50%;
}

.itemXL {
     background-color: #F4F4F4;
     margin-bottom: 24px;
     margin-right: 24px;
     position: relative;
     width: 100%;
}

.itemXL:before {
     content: "";
     display: block;
     padding-top: 100%;
}

.itemL:before {
     content: "";
     display: block;
     padding-top: 100%;
}

.itemL {
     background-color: #F4F4F4;
     float: left;
     margin-bottom: 2.7461%;
     margin-right: 2.7461%;
     padding: 24px;
     width: 38.5%;
}

.itemLcnt {
     position: relative;
}

.itemXLcnt {
     position: relative;
}

音乐（fiddle笑话？）：http://jsfiddle.net/bbvqofuq/

P.S。您可能想提出一个更一致的宽度设置。百分比将导致它跳来跳去。从您提供的示例中获取一个页面（网站笑话？）并修复元素的宽度或以不同的方式设置它们。如果您使用我链接到的 fiddle 并扩展和收缩结果窗格的宽度，您就会明白我在说什么。

Answer 2

我知道了，你可以在这里查看jsfiddle。net/SanMoll/5egfry4h。我忘记了您必须从 div 的宽度中减去边距。技巧很简单 2 divs at 50% in a containing div at 100%, 然后内容 divs 嵌套在这 50% divs 中；大的有 96% 的大小和 2% 的边距，而左边的正方形内容 divs 有 46% 的宽度和 2% 的边距（50% 减去 2x2%=46%）。

但最后你得到了可扩展的比例方块，我喜欢！

以百分比设置边距

Setting margins in percentage

html

css

margins