Question

我试图让网格按照我的意愿工作。它包含2种不同大小的元素，我希望它可以布局为砖石但不使用任何lib，因为它是一个非常简单的布局，我无法理解。你在图像上看到2个小物品在漂浮时跳下来。有谁可以帮助我吗？使用相同的结构，网格将是可重复的。

参考图片：

grid

＆＃13;

.grid {
  width: 100%;
}
.half {
  float: left;
  width: 50%;
  max-width: 1000px;
  border: 1px solid #000000;
}
.forth {
  float: left;
  width: 25%;
  max-width: 500px;
  border: 1px solid #000000;
}

＆＃13;

<section class="grid">
  <div class="half">
    <img src="http://placehold.it/1000x1000">
  </div>
  <div class="forth">
    <img src="http://placehold.it/500x500">
  </div>
  <div class="forth">
    <img src="http://placehold.it/500x500">
  </div>
  <div class="half">
    <img src="http://placehold.it/1000x1000">
  </div>
  <div class="forth">
    <img src="http://placehold.it/500x500">
  </div>
  <div class="forth">
    <img src="http://placehold.it/500x500">
  </div>
</section>

＆＃13;

Answer 1

Harrys的答案非常有效，如果你在整个网站上使用这个网格，那将是我想要的方法，但如果你不想进一步嵌套这些元素，那么这将是一个更简单的解决方案。

只需移动第一个div.fourth前面的两个div.half并将它们向右浮动即可。然后向右浮动第二个div.half，鲍勃是你的叔叔。

<section class="grid">
    <div class="forth right">
        <img src="http://placehold.it/500x500?text=block+1">
    </div>
    <div class="forth right">
        <img src="http://placehold.it/500x500?text=block+2">
    </div>  
  <div class="half">
        <img src="http://placehold.it/1000x1000?text=block+3">
    </div>
    <div class="half right">
        <img src="http://placehold.it/1000x1000?text=block+4">
    </div>
    <div class="forth">
        <img src="http://placehold.it/500x500?text=block+5">
    </div>
    <div class="forth">
        <img src="http://placehold.it/500x500?text=block+6">
    </div>
</section>

我还建议您应用box-sizing: border-box info here

将最大宽度应用于.grid并将其从其子项中删除也会更有意义。 make the img ‘responsive’

// Tidy up demo
// =================================
* {
    box-sizing: border-box;
}
// apply max width to image
img {
    max-width: 100%;
    height: auto;
    display: block;
}
// apply max width to grid container
.grid {
    max-width: 2000px;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}
// =================================

// orignal code
// =================================
.grid {
    width: 100%;
}

.half {
    float: left;
    width: 50%;
    max-width: 1000px; // with a max width applied to the grid you don't need these lines
    border: 1px solid #000000;
}

.forth {
    float: left;
    width: 25%;
    max-width: 500px; // with a max width applied to the grid you don't need these lines
    border: 1px solid #000000;
}
// =================================

// bit you need to add
// =================================
.right {
    float: right;
}
// =================================

// just so you can see the difference
// =================================
.right {
    background-color: #3cf;
}
.right img {
    opacity: 0.8;
}
// =================================

最后我在codepen上的例子 http://codepen.io/samwalker/pen/MwpLvM?editors=110

Answer 2

你必须嵌套网格。从作为兄弟姐妹的两个半网格开始，彼此相邻。然后左列中您想要的内容需要进入上半部分，包括最后的2季度网格。然后使用前两个四分之一网格开始下一半，并将半内容放入其中。

<section class="grid">
    <div class="half">
        <span class="contentLg">half A</span>
        <div class="fourth">
            <span class="contentSm">fourth C</span>
        </div>
        <div class="fourth">
            <span class="contentSm">fourth D</span>
        </div>
    </div>
    <div class="half">
        <div class="fourth">
             <span class="contentSm">fourth A</span>
        </div>
        <div class="fourth">
             <span class="contentSm">fourth B</span>
        </div>
        <div class="clear"></div>
        <span class="contentLg">half B</span>
    </div>
</section>

嵌套网格应该可以正常工作，只要它们没有默认边距即可。最好通过给它们装盒尺寸来划分栅格：边框盒;填充（这将允许元素总宽度保持不变）。

如果您只是添加内容以进入不会浮动的半网格，则您需要清除浮动（在我的示例中，我使用了带有类＆＃34的div;清除＆＃34; ）

嵌套网格时，百分比值会很麻烦。最简单的方法是使用像素宽度。可以在这个小提琴上看到CSS示例。

http://jsfiddle.net/j0c7aL2c/

CSS还有其他选项。您可以尝试更改嵌套网格的值，如下所示，但是当您在萤火虫中时，这很难维护和混淆。

.fourth {width:25%;}
.half .fourth {width:50%}

我建议使用像素宽度，并使用媒体查询来调整响应式布局的像素宽度。或者调整给定上下文的宽度，但要注意CSS名称空间增加了特异性，并且可能使网格容器的覆盖更具挑战性。

.half { width:480px;}
/* Tablet - Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .half { width:240px;}
}

VS。

.half { width:480px;}
.insideMyAwesomeContainer .half { width:240px;}

Answer 3

我会定位你的右下角1000px X 1000px块，给它一个额外的类并给它vi

https://jsfiddle.net/fso51v01/

Answer 4

要在没有JavaScript的情况下实现此目的，您需要根据列来考虑它。当你只处理一半和四分之一时，这可行，但如果内容的大小过于动态，可能会变得复杂/不可能。这是一个简化的例子（你必须使用边距）。

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.col, .col div {
  display: inline-block;
}
.col {
  width: 205px;
}

＆＃13;

<section class="col">
  <div class="half">
    <img src="http://placehold.it/205x205">
  </div>
  <div class="fourth">
    <img src="http://placehold.it/100x100">
  </div>
  <div class="fourth">
    <img src="http://placehold.it/100x100">
  </div>
</section>
<section class="col">
  <div class="fourth">
    <img src="http://placehold.it/100x100">
  </div>
  <div class="fourth">
    <img src="http://placehold.it/100x100">
  </div>
  <div class="half">
    <img src="http://placehold.it/205x205">
  </div>
</section>

＆＃13;

包含不同高度

4 个答案: