एचटीएमएल और सीएसएस के साथ एक तरफ दो छवियों को एक साथ चौड़ाई भरने के लिए मैं कैसे रख सकता हूं? - एचटीएमएल, सीएसएस, छवि

मैं एक तरफ दो मनमानी छवियों को रखना चाहता हूंएक डीआईवी तत्व के अंदर, जो वास्तव में 800 पीएक्स चौड़ा (चौड़ाई = 800 पीएक्स) है। छवियों की चौड़ाई और ऊंचाई में भी विभिन्न आकार हो सकते हैं। कभी-कभी ऊंचाई से अधिक चौड़ाई और कभी-कभी ऊंचाई की तुलना में चौड़ाई कम होती है। मैंने दोनों छवियों को एक div तत्व के अंदर रखा है, और एक तीसरा div जिसमें दोनों शामिल हैं। मैंने इस कोड को आजमाया, लेकिन ठीक से काम नहीं करता। मुझे यह कैसे करना चाहिए? जेएसएफडल: 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>

उत्तर:

उत्तर № 1 के लिए 1

ऐसा लगता है कि आप तैरना चाहते हैं: छवियों वाले divs को छोड़ दें, और फिर उन तत्वों के बाद फ्लोट को साफ़ करने के लिए एक और div जोड़ें।

आपके कोड का एक JSFiddle उत्कृष्ट होगा, ताकि हम एक और अधिक प्रभावशाली तरीके से मदद कर सकें :)


उत्तर № 2 के लिए 1

यहां 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>

यहां सीएसएस है:

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

यहां पहेली लिंक है: http://jsfiddle.net/Mohinder/vv9M6/1/

क्या यह वही है आप जिसकी तलाश में हैं?


उत्तर № 3 के लिए 1

शैली का उपयोग कर मुद्दे को ठीक किया प्रदर्शन: इनलाइन-फ्लेक्स। नीचे जेस्फिड है

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

संबंधित सवाल
सबसे लोकप्रिय