Html 使用内联块格式化块

我试图用内联块格式化2个不同长度的块，但是块1与块2的长度对齐。我需要将block-1的长度保持在100px的高度

jsfiddle：

http://jsfiddle.net/CGHZ5/5/

html:

---

使用浮动代替显示：内联块将CSS更改为以下内容：

    #id1-test{
    background-color:red;
    float:right;
    height:15px;
    width:10px;
}

#id1{
    background-color:blue;
    display:block;
    float: left;
    height:100px;
    width:200px;
}
#id2{
    background-color:green;
    display:block;

    height:200px;
    width:300px;
    float: left;
}

---

这正是你想要的

我不知道你在问什么。你保留的是什么，宽度还是高度？到底是“块的长度”是多少？它的宽度？

#id1-test{
    background-color:red;
    float:right;
    height:15px;
    width:10px;
}

#id1{
    background-color:blue;
    display:inline-block;

    height:100px;
    width:200px;
}
#id2{
    background-color:green;
    display:inline-block;

    height:200px;
    width:300px;
}

    #id1-test{
    background-color:red;
    float:right;
    height:15px;
    width:10px;
}

#id1{
    background-color:blue;
    display:block;
    float: left;
    height:100px;
    width:200px;
}
#id2{
    background-color:green;
    display:block;

    height:200px;
    width:300px;
    float: left;
}