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

Question

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

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

• #test-1：应该看起来像。
• #test-2：问题情况。

Answer 1

嗨，您定义了 hr float left 条件，您必须定义所有 hr 的宽度，这些 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 的宽度都设置为 300 像素。删除分配给两个 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/