CSS3并排划分，安排

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

问题是安排，它看起来像这样：

但我需要看起来像这样。安排divs没有空格。

这里有什么想法？谢谢 ：）。 这是JSFiddle，所以你可以玩它：http://jsfiddle.net/cn2r3tga/

Answer 1

将div重新排序（也将id更改为class）：

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

然后使用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

Answer 2

您可以将它们分组为两个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>

Answer 3

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>

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

Answer 4

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

更新了小提琴。

"float:right" 

应该用于右边的人。

Answer 5

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

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

using System.Media