Elemente der variablen Größen im gleichen Raum

Question

ich zwei Elemente aufweisen, die variable Breite aufweisen und müssen den gleichen Raum in einem div

ich in diesem Link erstellt ein Beispiel teilen: http://jsfiddle.net/zWVVN/

• # Test-1: Sollte aussehen.
• # test-2: Problemsituation.

Answer 1

Hallo Sie hr Schwimmer definieren gelassen, dass Bedingungen, die Sie Breite aller diejenigen hr geben, wie wie diese

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> 
​ 

zu schweben definieren müssen

Live-Demo http://jsfiddle.net/rohitazad/3e6bd/2/

Answer 2

Wenn Sie möchten, dass beide divs den gesamten Platz einnehmen und keinen Text umbrechen wollen, warum sollten Sie die Breite für beide divs auf 300px setzen. Entfernen Sie die Breite, die beiden Divs zugewiesen ist, und lassen Sie beide HR nach links schweben.

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

Demo: http://jsfiddle.net/3e6bd/3/