以百分比设置边距答案

【问题标题】：Setting margins in percentage以百分比设置边距
【发布时间】：2015-04-15 03:01:36
【问题描述】：

我有这段代码，它工作得很好，唯一我想不通的是让所有正方形之间的间距相等。也许代码比文字更好地解释了它。这是一个固定像素布局为 1465px 宽度的模型，例如。 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;
}

【问题讨论】：

您缺少</div> 来关闭.ContLft
很抱歉这是复制和粘贴错误，但谢谢！

标签： html css margins

【解决方案1】：

一些事情：

正如 Drew 指出的那样，您的标记缺少 div 的结束标记。
您需要在较小的项目上使用右边距
那些较小的物品太宽，这迫使它们将每个物品换成新的一行，而不是您想要的外观。
可能是别的东西，但粘贴起来更容易。 :-P

分区：

<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;
}

音乐（小提琴笑话？）：http://jsfiddle.net/bbvqofuq/

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

【讨论】：

谢谢戴夫，你的小提琴听起来不错:-)，问题是我想让较小的正方形与较大的正方形保持比例。这意味着较小的尺寸是较大的四分之一，因此排列得很好。我正在尝试 Marcotte 公式，以便设计响应。我想我的数学不是那么好，但我会再试一次。有点像jsfiddle.net/webtiki/MpXYr/3/embedded/result。无论如何，当我做对了时，我会更新这篇文章。再次感谢！
我知道了，你可以在这里查看jsfiddle.net/SanMoll/5egfry4h。诀窍是简单的 2 个 50% 的 div 在一个 100% 的包含 div 中，然后内容 div 嵌套在那些 50% 的 div 中；大的有 96% 的大小和 2% 的边距，而左边的方形内容 div 的宽度为 46%，边距也为 2%。我认为这是一个漂亮的设计，也许我应该更改此主题的名称，以便人们可以找到此样式？
看起来不错。这绝对是一个很好但外观简单的设计。如果您更改主题，请将其保留为问题，以便它仍然与 SO 相关，并确保它也与所提出的问题相关。

【解决方案2】：

我知道了，你可以在这里查看 jsfiddle.net/SanMoll/5egfry4h。我忘了你必须从 div 的宽度中减去边距。诀窍是简单的 2 个 50% 的 div 在一个 100% 的包含 div 中，然后内容 div 嵌套在那些 50% 的 div 中；大的有 96% 的大小和 2% 的边距，而左边的方形内容 div 的宽度为 46%，边距也为 2%（50% 减去 2x2%=46%）。

但最后你有可缩放的比例正方形，我喜欢！

【讨论】：