Richten Sie zwei Divs in derselben Zeile aus, ohne die Breite zu ändern.

Question

Ich kann kein Beispiel mit zwei Divs finden, von denen eines nach links und das andere nach rechts ausgerichtet ist, ohne die width zu setzen. Ich brauche auch eine reaktionsfähige Lösung. Irgendwelche Ideen?

.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
}

<div> 
 
    <div class="right"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" /> 
 
    </div> 
 
    <div class="left"> 
 
    The solution comes from the display property. Basically you need to make the two divs act like table cells. So instead of usign float:left, you'll have to use display:table-cell on both divs, and for the dynamic width div... 
 
    </div> 
 
</div>

Answer 1

Sie nur die float: right festlegen müssen, wenn Sie erste Methode Sie schwimmen, wie es derzeit ist. Und der Text wird automatisch unter das Bild gelegt. Vergessen Sie nicht, die Schwimmer zu leeren, indem Sie overflow: auto; zum Behälter hinzufügen.

.container { 
 
    overflow: auto; 
 
} 
 
.right { 
 
    float: right; 
 
}

<div class="container"> 
 
    <div class="right"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" /> 
 
    </div> 
 
    <div class="left"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper magna id ornare ultricies. Aliquam sit amet orci vitae ligula facilisis lobortis sit amet et odio. Suspendisse imperdiet elementum enim non venenatis. Aliquam lacinia lacus nisl, nec facilisis arcu laoreet eget. Maecenas nec metus eros. Morbi sit amet sollicitudin mi, non lacinia sapien. Nam imperdiet urna nisi, ac porta enim ultricies et. Nulla posuere semper orci, nec efficitur lorem molestie quis. Nam in hendrerit magna. Maecenas tristique nisi non diam tempus cursus. Suspendisse rhoncus pulvinar massa quis aliquet. Suspendisse imperdiet risus ex, sed vulputate enim ultricies non. Proin accumsan sem vel enim venenatis viverra ac sit amet dolor. 
 
    </div> 
 
</div>

Wenn Sie die beiden divs benötigen Seite ohne Umhüllung von Seite zu bleiben, können Sie overflow: auto nach links div hinzuzufügen.

.container { 
 
    overflow: auto; 
 
} 
 
.right { 
 
    float: right; 
 
} 
 
.left { 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    <div class="right"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" /> 
 
    </div> 
 
    <div class="left"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper magna id ornare ultricies. Aliquam sit amet orci vitae ligula facilisis lobortis sit amet et odio. Suspendisse imperdiet elementum enim non venenatis. Aliquam lacinia lacus nisl, nec facilisis arcu laoreet eget. Maecenas nec metus eros. Morbi sit amet sollicitudin mi, non lacinia sapien. Nam imperdiet urna nisi, ac porta enim ultricies et. Nulla posuere semper orci, nec efficitur lorem molestie quis. Nam in hendrerit magna. Maecenas tristique nisi non diam tempus cursus. Suspendisse rhoncus pulvinar massa quis aliquet. Suspendisse imperdiet risus ex, sed vulputate enim ultricies non. Proin accumsan sem vel enim venenatis viverra ac sit amet dolor. 
 
    </div> 
 
</div>

oder CSS-Tabelle, wie Sie im Text erwähnt.

.container { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.left, .right { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper magna id ornare ultricies. Aliquam sit amet orci vitae ligula facilisis lobortis sit amet et odio. Suspendisse imperdiet elementum enim non venenatis. Aliquam lacinia lacus nisl, 
 
    nec facilisis arcu laoreet eget. Maecenas nec metus eros. Morbi sit amet sollicitudin mi, non lacinia sapien. Nam imperdiet urna nisi, ac porta enim ultricies et. Nulla posuere semper orci, nec efficitur lorem molestie quis. Nam in hendrerit magna. 
 
    Maecenas tristique nisi non diam tempus cursus. Suspendisse rhoncus pulvinar massa quis aliquet. Suspendisse imperdiet risus ex, sed vulputate enim ultricies non. Proin accumsan sem vel enim venenatis viverra ac sit amet dolor. 
 
    </div> 
 
    <div class="right"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" /> 
 
    </div> 
 
</div>

Answer 2

Nur float:left entfernen - suchen Sie dieses Ergebnis?

.right { 
 
    float: right; 
 
}

<div> 
 
    <div class="right"> 
 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT8JRcAEUeQSC6Do6htEEyzIIqgmlRJrTOdthM9EcU2ynvx6fSN" width="120" /> 
 
    </div> 
 
    <div class="left"> 
 
    The solution comes from the display property. Basically you need to make the two divs act like table cells. So instead of usign float:left, you'll have to use display:table-cell on both divs, and for the dynamic width div 
 
    </div> 
 
</div>

Answer 3

Die Lösung für Sie ist flexbox

So würde der Code wie folgt sein: http://codepen.io/sandrina-p/pen/ZOWNzP

.container { //the parent 
    display: flex; 
    justify-content: space-between; 
} 

Aber Achtung, diese unterstützt nur IE10 +. Sie können mehr über die Unterstützung siehe hier: http://caniuse.com/#search=flexbox