मैं css
और bootstrap 3.2
उपयोग करते हुए मेरे divs की एक विशिष्ट HTML
मार्कअप के लिए कोशिश कर रहा हूँ। नीचे दी गई छवि उस परिणाम को दर्शाती है जिसे मैं प्राप्त करना चाहता हूं।सीएसएस इनलाइन ब्लॉक और बूटस्ट्रैप ग्रिड प्रणाली उत्पादन
मैंने बूटस्ट्रैप ग्रिड सिस्टम का उपयोग किया है ताकि मेरा पृष्ठ उत्तरदायी और छोटे स्क्रीन उपकरणों में ठीक से प्रदर्शित हो सके। यह वह कोड है जिसे मैंने आजमाया है। और मैंने इसका परीक्षण करने के लिए http://www.bootply.com का उपयोग किया।
कोई विचार मार्कअप कैसे प्राप्त करें?
<div>
<div style="display:inline-block; border:1px solid gray; width:150px; height:150px;">
<img src='' alt="image go here !"/>
</div>
<div class="container-fluid" style="display:inline-block;">
<div class="row" style="border:1px solid gray;">
<div class="col-md-9">This is the product name</div>
<div class="col-md-3 text-right">1 230.99</div>
</div>
<div class="row" style="display:inline-block; border:1px solid gray;">
<div class="col-md-6">Property 1</div>
<div class="col-md-6">Property 2</div>
</div>
</div>
</div>
वांछित परिणाम:
संपादित करें: परिणाम मैं:
आपके उत्तर के लिए धन्यवाद, लेकिन अंतरिक्ष betwee n छवि और दूसरी सामग्री बहुत बड़ी है, इसलिए मैंने बूटस्ट्रैप ग्रिड सिस्टम में छवि शामिल नहीं की है। – SidAhmed
क्या आपको अभी भी '.col-md-3' से' .col-md-2' में परिवर्तन के बाद बड़ा लगता है? [मेरे अद्यतन बूटली देखें] (http://www.bootply.com/a8vgNCTxmZ)। यदि हां, तो मुझे बताएं। हम कुछ सीएसएस जोड़ देंगे। – Tim
छवि को 185 पीएक्स पर रखने वाले div की चौड़ाई को ठीक करके, मुझे मार्कअप चाहिए था। धन्यवाद। – SidAhmed