2014-10-18 23 views
6

मैं 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> 

वांछित परिणाम: The desired result

संपादित करें: परिणाम मैं: The result I get

उत्तर

12

I've created a Bootply for you.

<div class="container"> 
    <div class="row"> 

     <div class="col-md-3"> 
      <div class="img"> 
       <img src=""> 
      </div> 
     </div> 

     <div class="col-md-9"> 
      <div class="row"> 
      <div class="col-md-8"> 
       This is the product name 
      </div> 
      <div class="col-md-4"> 
       1 230.99 
      </div> 
      </div> 

      <div class="row"> 
      <div class="col-md-6"> 
       Property 1 
      </div> 
      <div class="col-md-6"> 
       Property 2 
      </div> 
      </div> 
     </div> 

    </div> 
</div> 
+0

आपके उत्तर के लिए धन्यवाद, लेकिन अंतरिक्ष betwee n छवि और दूसरी सामग्री बहुत बड़ी है, इसलिए मैंने बूटस्ट्रैप ग्रिड सिस्टम में छवि शामिल नहीं की है। – SidAhmed

+0

क्या आपको अभी भी '.col-md-3' से' .col-md-2' में परिवर्तन के बाद बड़ा लगता है? [मेरे अद्यतन बूटली देखें] (http://www.bootply.com/a8vgNCTxmZ)। यदि हां, तो मुझे बताएं। हम कुछ सीएसएस जोड़ देंगे। – Tim

+0

छवि को 185 पीएक्स पर रखने वाले div की चौड़ाई को ठीक करके, मुझे मार्कअप चाहिए था। धन्यवाद। – SidAhmed

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