Question

我有两个具有可变宽度的元素，并且必须在div中共享相同的空间

我在此链接中创建了一个示例： http://jsfiddle.net/zWVVN/

#test-1：应该是这样的。
#test-2：问题情况。

Answer 1

您可以定义hr float left，条件是您必须定义浮动的所有hr的宽度，就像这样

<强>的CSS

#teste1, #teste2 {
    width: 300px; }
hr {
    border: 1px solid green;
    background: red;
    height: 25px;
    float: left;
    width:200px;
}
h2 {
    float: right;}

#teste1 hr{
    width: 230px;}

<强> HTML

<div id="teste1">
    <hr>
    <h2>conteudo</h2>
</div>



    <div id="teste2">
        <hr>
        <h2>conteudo</h2>
    </div>

现场演示http://jsfiddle.net/rohitazad/3e6bd/2/

Answer 2

如果你想让两个div占据整个空间并且不想将文本包裹起来，那么为什么你要将两个div的宽度都设置为300px。删除分配给两个div的宽度，并使两个HR向左浮动。

#teste1, #teste2 {
    //this class not needed
}
hr {
    border: 0;
    background: red;
    height: 5px;
    float: left;
}
h2 {
    float: left;
}

演示：http://jsfiddle.net/3e6bd/3/

同一空间中可变大小的元素

2 个答案: