浮动div块。一个div 100％高度在两个堆叠的div的50％高度旁边

本文介绍了浮动div块。一个div 100％高度在两个堆叠的div的50％高度旁边的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试创建如下模块的网格：

我有一个单一模块的样式，我有所有不同大小的盒子的类，我添加到每个框的div类，取决于我想要的大小：（100％/ 50％/ 33％/ 25％width& height）。

堆叠您在上面的图像的左上角看到的框。我想，我将不得不创建另一个类或两个来覆盖周围的框的浮动，但我不知道该怎么办。这是我的代码：

这里有一个简单的FIDDLE

$ b

< div class =box width_25 container_150> < div class =header>半尺寸标题< / div> < div class =content> 顶部框< / div> < / div> < div class =box width_25 container_150> < div class =header>半尺寸标题2< / div> < div class =content> 下面的框< / div> < / div> < div class =box width_50 container_300> < div class =header>总提示< / div> < div class =content> 中心div < / div> < / div> < div class =box width_25 container_300> < div class =header> Title< / div> < div class =content> 右div < / div> < / div>

CSS ：

/ *变量宽度* / .box { display：block; -moz-box-sizing：border-box; -webkit-box-sizing：border-box; box-sizing：border-box; margin：1％; background：#FFF; color：＃333; border：1px solid #DDD; box-shadow：0px 0px 5px 1px #DDD; } .width_100 { display：inline-block; float：left; width：98％; } .width_50 { display：inline-block; float：left; width：48％; } .width_33 { display：inline-block; float：left; width：31.33％; } .width_25 { display：inline-block; float：left; width：23％; } .container_150 { height：130px; // not 150px to compensation for margins } .container_200 { height：200px; } .container_250 { height：250px; } .container_300 { height：300px; } .container_400 { height：400px; }

解决方案

div在div中以实现

< div style =width：30％; float：left> < div style =width：100％; background：blue; height：100px>< / div> < div style =width：100％; background：yellow; height：100px>< / div> < / div> < div style =width：70％; float：right; background：red; height：200px>< / div&

查看此小提琴

I'm trying to create a grid of modules like this:

I have a style for a single module, and I have classes for all the different sized boxes which I add to the div classes for each box depending on the size I want: (100%/50%/33%/25% width & height).

I'm trying to stack the boxes that you see in the upper left of the image above. I figure that I'll have to create another class or two to override the floats of the surrounding boxes, but I'm not sure what to do. Here's my code:

HERE'S A SIMPLE FIDDLE

HERE'S IT IS WITH THE CURRENT CODE

HTML:

<div class="box width_25 container_150"> <div class="header">Half Size Title</div> <div class="content"> Top box </div> </div> <div class="box width_25 container_150"> <div class="header">Half Size Title 2</div> <div class="content"> Box right below </div> </div> <div class="box width_50 container_300"> <div class="header">Total Mentions</div> <div class="content"> Center div </div> </div> <div class="box width_25 container_300"> <div class="header">Title</div> <div class="content"> Right div </div> </div>

CSS:

/* Variable Widths */ .box { display:block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 1%; background: #FFF; color: #333; border:1px solid #DDD; box-shadow:0px 0px 5px 1px #DDD; } .width_100 { display: inline-block; float: left; width: 98%; } .width_50 { display: inline-block; float: left; width: 48%; } .width_33 { display: inline-block; float: left; width: 31.33%; } .width_25 { display: inline-block; float: left; width: 23%; } .container_150 { height:130px; // not 150px to compensate for margins } .container_200 { height:200px; } .container_250 { height:250px; } .container_300 { height:300px; } .container_400 { height:400px; }

解决方案

You need to wrap the stacked divs in a div to achieve that

<div style="width:30%;float:left"> <div style="width:100%; background:blue; height:100px"></div> <div style="width:100%; background:yellow; height:100px"></div> </div> <div style="width:70%; float:right;background:red; height:200px"></div>

Check out this fiddle