Wie kann ich zwei Bilder nebeneinander mit HTML und CSS platzieren, um eine bestimmte Breite optimal auszufüllen? - HTML, CSS, Bild

I want to place two arbitrary images side by side in einem DIV-Element, das genau 800 px breit ist (Breite = 800px). Die Bilder können eine Vielzahl von Größen haben, sowohl in der Breite als auch in der Höhe. Manchmal Breite größer als Höhe und manchmal Breite kleiner als Höhe. Ich lege beide Bilder in ein div-Element und ein drittes div, das beides enthält. Ich habe diesen Code ausprobiert, funktioniert aber nicht richtig. Wie soll ich das machen? JSFiddle: http://jsfiddle.net/gUT43/

<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
width: auto9; /* ie8 */
}
div {
display: inline-block;
white-space: nowrap;
}
</style>
</head>
<body>

<div style="max-width: 800px; border:2px black solid">

<div style="height: auto; border:1px green solid"">
<img src=http://i.imgur.com/Xt6vUQD.jpg>
</div>

<div style="height: auto; border:1px blue solid"">
<img src=http://i.imgur.com/BqFMNlq.jpg >
</div>

</div>

</body>
</html>

Antworten:

1 für die Antwort № 1

Es scheint mir, dass Sie floaten möchten: Lassen Sie die divs, die die Bilder enthalten, und fügen Sie nach diesen Elementen ein weiteres div hinzu, um den Float zu löschen.

Ein JSFiddle Ihres Codes wäre exzellent, so dass wir effizienter helfen könnten :)


1 für die Antwort № 2

Hier ist der HTML:

<div class="main_block">

<div class="inner_block">
<img src=http://i.imgur.com/Xt6vUQD.jpg>
</div>

<div class="inner_block">
<img src=http://i.imgur.com/BqFMNlq.jpg >
</div>
</div>

Hier ist das CSS:

.main_block {
width: 800px;
border: 2px black solid;
}

.main_block: before, .main_block: after {
overflow: hidden;
content: "";
display: table;
}

.main_block: after {
clear: both;
}

.inner_block {
display: inline-block;
float: left;
width: 50%;
}

.inner_block img {
width: 100%;
height: auto;
vertical-align: middle;
}

Hier ist der Geigen-Link: http://jsfiddle.net/Mohinder/vv9M6/1/

Suchst du danach?


1 für die Antwort № 3

behebt das Problem mit dem Stil Anzeige: Inline-Flex. Unten ist das Jfiddle

http://jsfiddle.net/38ry0deL/

<!DOCTYPE html>
<body>
<div style="max-width: 800px; border:2px black solid">
<div style="height: auto; border:1px green solid">
<img src=http://i.imgur.com/Xt6vUQD.jpg />
</div>
<div style="height: auto; border:1px blue solid">
<img src=http://i.imgur.com/BqFMNlq.jpg />
</div>
</div>
</body>
img {
max-width: 100%;
height: auto;
width: auto9;
/* ie8 */
}
div {
display: inline-flex;
}

0 für die Antwort № 4
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
width: auto9; /* ie8 */
}
div {
display: inline-block;
white-space: nowrap;
}
.img1,.img2{
width:50%;
}
</style>
</head>
<body>

<div style="max-width: 800px; border:2px black solid">

<div class="img1" style="height: auto; border:1px green solid"">
<img src=http://i.imgur.com/Xt6vUQD.jpg>
</div>

<div class="img2" style="height: auto; border:1px blue solid"">
<img src=http://i.imgur.com/BqFMNlq.jpg >
</div>

</div>

</body>
</html>

Speisekarte