CSS3 Divs并排，安排

I have problem with divs arrangement. Here is my code:

我有div安排的问题。这是我的代码:

#container{
    
}
#block1{
    vertical-align: top;
   display: inline-block;
    width:49%;
    height:50px;
    background-color:red;
}
#block2{
    vertical-align: top;
   display: inline-block;
    width:49%;
    height:100px;
    background-color:blue;
}

<div id="container">
    <div id="block1"></div>
    <div id="block2"></div>
    <div id="block1"></div>
    <div id="block1"></div>
</div>

And issue is arrangement, it looks like this: CSS3 Divs并排，安排

But i need to look like this. Arrange divs up without white spaces.

Any ideas here? Thanks :). Here is JSFiddle, so you can play with it: http://jsfiddle.net/cn2r3tga/

问题是安排,它看起来像这样:但我需要看起来像这样。安排divs没有空格。这里有什么想法?谢谢 :)。这是JSFiddle,所以你可以玩它:http://jsfiddle.net/cn2r3tga/

5 个解决方案

#1

css

 #container{

}
#block1{
  background-color: #FF0000;
    display: inline-block;
    float: left;
    height: 50px;
    margin: 2px 0;
    vertical-align: top;
    width: 100%;
}
#block2{
   background-color: #0000FF;
    display: inline-block;
    float: left;
    height: 100px;
    margin: 2px 0;
    vertical-align: top;
    width: 100%;
}
.alignment{
    float: left; 
    width: 50%;
}

HTML

<div id="container">
    <div class="alignment">
        <div id="block1"></div>
        <div id="block1"></div>
    </div>
    <div class="alignment">
        <div id="block2"></div>
        <div id="block1"></div>
    </div>
</div>

Note: ID of any HTML control should be unique

注意:任何HTML控件的ID都应该是唯一的

#2

Reorder your div's like this (also changed the id to class):

像这样重新排序div(也将id更改为class):

<div id="container">
    <div class="block2"></div>
    <div class="block1"></div>
    <div class="block1"></div>
    <div class="block1"></div>
</div>

Then use float instead of inline-block:

然后使用float而不是inline-block:

.block1{
    vertical-align: top;
    float: right;
    width:49%;
    height:50px;
    background-color: red;
}
.block2{
    float: right;
    width:49%;
    height:100px;
    background-color: blue;
}

Updated Fiddle

#3

You can group them into two divs and then get the desired result. As shown below:

您可以将它们分组为两个div,然后获得所需的结果。如下所示:

#container{
    
}
.left{
    float:left;
    width:49%;
    margin-right:2%
}
.right{
    float:right;
    width:49%;
}
.block1{
    vertical-align: top;
   display: inline-block;
    width:100%;
    height:50px;
    margin-bottom: 10px;
    background-color:red;
}
.block2{
    vertical-align: top;
   display: inline-block;
    width:100%;
    height:100px;
    background-color:blue;
}

<div id="container">
    <div class="left">
        <div class="block1"></div>
        <div class="block1"></div>
    </div>
    <div class="right">
        <div class="block2"></div>
        <div class="block1"></div>
    </div>
</div>

#4

https://jsfiddle.net/cn2r3tga/3/

Updated fiddle.

"float:right"

should be used for those going to the right.

应该用于那些向右走的人。

#5

first you use id which should be used only once so use classes instead which you can re-use as many times as you want.

首先你使用id应该只使用一次,所以使用类,你可以根据需要重复使用多次。

Secondly I would add another 2 div within your .container to make the result you want and add the css to keep the shape your want:

其次,我会在你的.container中添加另外2个div来制作你想要的结果并添加css以保持你想要的形状:

<div class="container">
<div calss="left">
<div class="block1"></div>
<div class="block1"></div>
</div>
<div class="right">
<div class="block2"></div>
</div>
</div>

#1

css

 #container{

}
#block1{
  background-color: #FF0000;
    display: inline-block;
    float: left;
    height: 50px;
    margin: 2px 0;
    vertical-align: top;
    width: 100%;
}
#block2{
   background-color: #0000FF;
    display: inline-block;
    float: left;
    height: 100px;
    margin: 2px 0;
    vertical-align: top;
    width: 100%;
}
.alignment{
    float: left; 
    width: 50%;
}