Erste links und rechts schwimmt statt Stapel

Question

Dies ist leichter zu überlappen, um zu zeigen, als erklären: http://jsfiddle.net/gN4VZ/

Ist es möglich, meinen rechten schwebte Inhalt (blau) zu haben, meinen linken schwebte Inhalt überlappen (rot) statt darunter zu stapeln, wenn die beiden zusammen die Containerbreite überschreiten?

Answer 1

Sie könnten absolute positioning verwenden.

Statt float:right Verwendung position:absolute; right:0; und statt float:left Verwendung position:absolute; left:0;

Seien Sie sicher, position:relative; auf Ihren Eltern DIVs so einzustellen, dass die absolute Positionierung zu ihren jeweiligen Behältern relativ anstelle der Seite.

Answer 2

Verwenden Sie die absolute Positionierung mit der Klasse .box, die auf position:relative eingestellt ist.

http://jsfiddle.net/gN4VZ/1/

beachte, dass ich auf jeder .box so eine Höhe eingestellt hatte, dass es würde nicht oben/unten überlappen.

würde dein neues CSS

sein

.bar { 
    border:solid 1px black; 
    color:white; 
    position:relative; 
    height:40px; 
} 
.clear { 
    clear:both; 
} 
.left-bar { 
    background:red; 
    height:40px; 
    position:absolute; 
    left:0; 
} 
.right-bar { 
    background:blue; 
    position:absolute; 
    right:0; 
    height:40px; 
}​ 

---

wie von My Head Hurts, Sie könnten nur die richtige Position, die die Notwendigkeit für die Höhe auf der äußeren div eliminiert.

http://jsfiddle.net/gN4VZ/2/