Question

我有这个代码很好地工作，我唯一能解决的是让所有方块之间的间距相等。也许代码解释它比单词更好。作为示例，这里是一个具有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;
}

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

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

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

Answer 2

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

但最终你有可扩展的比例正方形，我喜欢！

以百分比设置边距

2 个答案: