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

मैं एक डीवी तत्व के अंदर एक तरफ दो मनमानी छवियों को एक तरफ रखना चाहता हूं, जो वास्तव में 800 पीएक्स चौड़ा (चौड़ाई = 800 पीएक्स) है। छवियों की चौड़ाई और ऊंचाई में भी विभिन्न आकार हो सकते हैं। कभी-कभी ऊंचाई से अधिक चौड़ाई और कभी-कभी ऊंचाई की तुलना में चौड़ाई कम होती है। मैंने दोनों छवियों को एक div तत्व के अंदर रखा है, और एक तीसरा div जिसमें दोनों शामिल हैं। मैंने इस कोड की कोशिश की, लेकिन ठीक से काम नहीं करता है। मैं इसे कैसे करूं? JSFiddle: http://jsfiddle.net/gUT43/एचटीएमएल और सीएसएस के साथ एक साथ दी गई चौड़ाई को भरने के लिए मैं दो छवियों को एक तरफ कैसे रख सकता हूं?

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

स्रोत

2013-06-08 Konstantin

आप एक jsfiddle पोस्ट कर सकते हैं? या एक छवि? –

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

एक अपने कोड की JSFiddle, उत्कृष्ट हो ताकि हम एक और अधिक effcient ढंग :)

स्रोत

2013-06-08 01:48:25 mituw16

हां, मैंने जेएसफिडल के बारे में सोचा, क्योंकि मैंने इसे एक अलग प्रश्न में देखा है, लेकिन पहले कभी इसका इस्तेमाल नहीं किया और मुझे नहीं पता था कि इसका उपयोग कैसे किया जाए। – Konstantin

जेएसफ़िल्ड ने जोड़ा: 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>

स्रोत

2013-10-25 09:33:57 Tejas

यहाँ में मदद कर सकता है होगा 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>

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

http://jsfiddle.net/Mohinder/vv9M6/1/

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

यहाँ बेला कड़ी है 10

क्या आप यह देख रहे हैं?

स्रोत

2013-10-25 10:21:38

शैली प्रदर्शन का उपयोग कर समस्या को हल किया गया: इनलाइन-फ्लेक्स। नीचे 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; 
}

स्रोत

2016-08-22 18:41:35 vineel

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

उत्तर

संबंधित मुद्दे