1. घर
  2. सवाल और जवाब
  3. एक ही पंक्ति में दो <div>...</div> कैसे बनाएँ?

एक ही पंक्ति में दो <div>...</div> कैसे बनाएँ?

2010-12-02 8 views

उत्तर

10

सभी divs के लिए इसे आज़माएं।

display:inline-block;

स्रोत

2010-12-02 23:53:02

+0

+1 डिस्प्ले: इनलाइन पर्याप्त लचीला नहीं है और फ्लोट गन्दा हैं! –

2
उन्हें सीएसएस के साथ फ्लोट

:

एचटीएमएल


<div class="container1"></div> 
<div class="container2"></div> 
<div class="clear"></div>

सीएसएस


.clear { clear: both; } 
.container1, .container2 { float: left; }

आप नाव खाली करने के लिए है .. इसलिए का उपयोग करें:

float: left

स्रोत

2010-12-02 23:12:30 simshaun

1

उन्हें नाव बनाओ दोनों साफ़ करें :)

स्रोत

2010-12-02 23:14:53

9

सरल: <span> एस का उपयोग करें।

<div> डिफ़ॉल्ट रूप से display: block है, जिसका अर्थ है कि अगला तत्व एक नई पंक्ति पर होगा।

आप जो व्यवहार चाहते हैं उसे प्राप्त करने के लिए आप उन्हें display: inline पर बदल सकते हैं। लेकिन याद रखें कि एक इनलाइन <div> सिर्फ <span> है।

स्रोत

2010-12-02 23:18:01

1

फ़्लोट मेरे पृष्ठ केंद्र संरेखण को गड़बड़ कर देता है। यहां मुझे जो मिला है, मैं पृष्ठ केंद्रित करने के बिना एक ही पंक्ति पर 2 और 3 प्राप्त करना चाहता हूं। फ्लोट काम नहीं करता है क्योंकि जब मैं ब्राउज़र का आकार बदलता हूं, तो यह इसके साथ चलता है।

<head> 
<meta http-equiv="Content-Language" content="en-us"> 
<style type="text/css"> 
.div1 { 
    background: #faa; 
    width: 500; 
} 

.div2 { 
    background: #ffc; 
    width: 400; 
    margin-right: 100px; 
} 
.div3 { 
    background: #cfc; 
    width: 100; 
    margin-left: 400px; 

} 


</style> 
</head> 

<html> 
<body> 
<center> 

<div class="div1"> This is no 1</div> 
<div class="div2"> This is no 2</div> 
<div class="div3"> This is no 3</div> 

</center> 
</body> 
</html>

स्रोत

2014-02-10 04:35:18

2

एक डिवी कंटेनर का उपयोग करें और अपने सभी divs के अंदर रखें।

.div_container{ 
    display: flex; 
    flex-direction: row; 
}

यह आसान है!

स्रोत

2017-11-14 17:54:49 Abraxas

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

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