包含不同高度的div的CSS网格

Question

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

参考图片：

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

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

Answer 1

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

只需在第一个div.half前面移动两个div.fourth并向右浮动它们。 然后漂浮第二个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 信息

将最大宽度应用于.grid并将其从子.grid移除并使img '响应'也更有意义

// 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

我会将你的右下角1000px X 1000px块作为目标，给它一个额外的类并给它float:right;

https://jsfiddle.net/fso51v01/

Answer 3

你必须嵌套网格。 从作为兄弟姐妹的两个半网格开始，彼此相邻。 然后左列中您想要的内容需要进入上半部分，包括最后的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>

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

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

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

http://jsfiddle.net/j0c7aL2c/

CSS还有其他选择。 您可以尝试更改嵌套网格的值，如下所示，但是当您使用firebug时，这很难维护和混淆。

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

与

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

Answer 4

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

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

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