浮动div块。一个div 100％高度在两个堆叠的div的50％高度旁边 [英] Floating div blocks. One div 100% height next to two stacked divs of 50% height

问题描述

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

我有一个单一模块的样式，我有所有不同大小的盒子的类，我添加到每个框的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

这篇关于浮动div块。一个div 100％高度在两个堆叠的div的50％高度旁边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！