Question

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

的jsfiddle：

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

HTML：

<div id="id1">
    <div id="id1-test">
    </div>
</div>
<div id="id2"></div>

CSS

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

Answer 1

使用浮动代替display：inline-block

Answer 2

将您的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;
}

这正是你想要的小提琴。

使用内联块格式化块

2 个答案: