Jak umieścić dwa obrazy obok kodu HTML i CSS, aby optymalnie wypełnić określoną szerokość?

Chcę umieścić dwa dowolne obrazy obok siebie w elemencie DIV, który ma dokładnie 800 pikseli szerokości (szerokość = 800 pikseli). Obrazy mogą mieć różne rozmiary, szerokość i wysokość. Czasami szerokość większa niż wysokość, a czasem szerokość mniejsza niż wysokość. Umieściłem oba obrazy w elemencie div i trzecim div, który zawiera oba. Próbowałem tego kodu, ale nie działa poprawnie. Jak mam to zrobić? JSFiddle: http://jsfiddle.net/gUT43/Jak umieścić dwa obrazy obok kodu HTML i CSS, aby optymalnie wypełnić określoną szerokość?

<!DOCTYPE html> 
<html> 
<head> 
<style> 
img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* 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>

Źródło

2013-06-08 Konstantin

można umieścić jsfiddle? lub obraz? –

Wydaje mi się, że chcesz pływaka: lewy DIV, które zawierają obrazy, a następnie dodać kolejny div po tych elementów, aby wyczyścić pływak.

JSFiddle o kodzie byłaby doskonała, tak, że możemy pomóc w bardziej effcient sposób :)

Źródło

2013-06-08 01:48:25 mituw16

Tak, myślałem o JSfiddle, ponieważ widziałem to w innym pytaniu, ale nigdy wcześniej go nie użyłem i nie wiedziałem, jak go użyć. – Konstantin

Jsfiddle dodano: http://jsfiddle.net/gUT43/ – Konstantin

<!DOCTYPE html> 
<html> 
<head> 
<style> 
img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* 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>

Źródło

2013-10-25 09:33:57 Tejas

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

Oto 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; 
}

Oto link skrzypce: http://jsfiddle.net/Mohinder/vv9M6/1/

Czy tego właśnie szukasz?

Źródło

2013-10-25 10:21:38

Naprawiono problem z wyświetlaniem stylu : inline-flex. Poniżej znajduje się Jsfiddle

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: auto\9; 
    /* ie8 */ 
} 
div { 
    display: inline-flex; 
}

Źródło

2016-08-22 18:41:35 vineel

Jak umieścić dwa obrazy obok kodu HTML i CSS, aby optymalnie wypełnić określoną szerokość?

Odpowiedz

Powiązane problemy