उसी पंक्ति पर तत्व डालकर

Question

मैं निम्न तत्वों को उसी पंक्ति पर कैसे रख सकता हूं? मुझे पता है कि इसे डिस्प्ले प्रॉपर्टी के साथ करना है, लेकिन वह वही है जो हमेशा मुझे रोकता है और कभी काम नहीं कर सकता।

http://jsfiddle.net/MgcDU/4137/

HTML:

<div class="container"> 
    <div class="small-video-section"> 
    <div class="thumbnail-container"> 
     <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" /> 
    </div> 
    <div class="thumbnail-container"> 
     <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" /> 
    </div> 
    <div class="thumbnail-container"> 
     <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" /> 
    </div> 
    <div class="thumbnail-last"> 
     <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" /> 
    </div> 
    </div> 
</div> 

सीएसएस:

.small-video-section { 
    height: 134px; 
} 

.thumbnail-container { 
    width: 220px; 
    margin-top: 15px; 
    margin-right: 20px; 
    display: inline-block; 
} 

.thumbnail-last { 
    width: 220px; 
    margin-top: 15px; 
    display: block; 
} 

धन्यवाद। :)

Answer 1

You could use float: left or float: right

img {float: left;} 

ध्यान दें, आप clearfix जो श्री Gallagher अच्छी तरह से बताते हैं का उपयोग करें या उस पर clear: both; है कि परिणाम आप उम्मीद कर पाने के लिए किसी भी तत्व के साथ पालन करने के लिए होगा।

आप left और right या मार्जिन

img.image-one {left: 0: top: 0;} 
img.image-one {right: 300px; top: 0;} 
img.image-three {margin-left: 100px;} 
/*etc etc...*/ 

संपादित करें का उपयोग कर एक एक करके उन्हें रख सकते हैं बिल्कुल

img {position: absolute;} 

और फिर स्थिति एक: divs नोटिस नहीं किया था, आप रखना चाहिए नाव पर छोड़ दिया जो किसी और ने उल्लेख किया है, हालांकि दोनों विकल्प तकनीकी रूप से आपके मामले में काम करते हैं। यह करने के लिए थेरेस शायद एक दर्जन से अधिक तरीकों ...

Answer 2

display:blockdisplay:inline-block बदलकर .thumbnail-last नियम में यह बदल जाएगा।

Answer 3

divs पर float: left आज़माएं। यह सबको लाइन में दिखने के लिए मिल जाएगा। अन्य बुद्धिमान ब्लॉक तत्वों एक ब्रेक परिचय

Answer 4

इस कोड का प्रयास करें: - केवल float:left

<div class="container"> 
     <div class="small-video-section"> 
     <div class="thumbnail-container" style="float:left;height:134px;width:150px"> 
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" /> 
     </div> 
     <div class="thumbnail-container" style="float:left;height:134px;width:150px"> 
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" /> 
     </div> 
     <div class="thumbnail-container" style="float:left;height:134px;width:150px"> 
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" /> 
     </div> 
     <div class="thumbnail-last" style="float:left;height:134px;width:150px"> 
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" /> 
     </div> 
     </div> 
    </div> 

सभी अपने कोड का उपयोग करें ठीक हैं। लेकिन, मैंने HTML भाग में केवल style जोड़ा है।

अद्यतन लिंक: -

http://jsfiddle.net/MgcDU/4148/

इसका काम कर ठीक।

Answer 5

यह एक पुरानी पोस्ट है लेकिन यह बूटस्ट्रैप के साथ उसी पंक्ति पर स्थान तत्वों की खोज करते समय नाम करता है, इसलिए मैं दूसरों की सहायता करूंगा।
बूस्ट्रैप में एक ही पंक्ति पर कुछ तत्व रखने के लिए इनलाइन फॉर्म क्लास है (यह गठबंधन छोड़ दिया गया है)।
Bootstrap CSS inline form