आप सीएसएस तत्वों को एक दूसरे के नीचे सीधे कैसे स्थान देते हैं?

मुझे पता है कि शायद इस तरह एक हल सवाल है, लेकिन मैंने खोज की है और मैं समाधान नहीं कर सका।आप सीएसएस तत्वों को एक दूसरे के नीचे सीधे कैसे स्थान देते हैं?

तो, देखो। मेरे पास वेबसाइट के लिए मूल बातें हैं। एक शीर्षलेख, विशेष सामग्री, मुख्य सामग्री, और पाद लेख। मैं मुख्य सामग्री को विशेष रुप से प्रदर्शित सामग्री के अंतर्गत आना चाहता हूं, लेकिन अभी इसके पीछे है। मैं इसे नीचे कैसे चला सकता हूं?

HTML:

<html> 
<head> 
    <link href="style.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
    <div class="navigation"></div> 
    <div class="content-featured"></div> 
</body>

सीएसएस:

html, body { 
margin: 0; 
padding: 0; 
} 

.navigation { 
float: left; 
padding: 15px 0; 
min-width: 100%; 
opacity: .48; /* layer alpha */ 
background-color: #1f1f1f; /* layer fill content */ 
height: 20px; 
} 

.content-featured { 
height: 384px; 
background-image: -moz-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
background-image: -o-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
background-image: -webkit-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
background-image: linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */ 
} 

.content-main { 
height: 308px; 
}

स्रोत

2013-07-26 Criesval

कृपया पोस्ट क्या तुम अब तक ... – Dror

आप अपने कोड यहाँ प्रदान कर सकते हैं हो सकता है? उत्तर दोनों को साफ़ करने, फ्लोट इत्यादि को ठीक करने के लिए किया जा सकता है आदि। हालांकि आपका कोड देखने के लिए अधिक विशिष्ट होना चाहिए (एचटीएमएल और सीएसएस) – Thanos

कोई कोड के लिए खेद है। पोस्ट अपडेट किया गया। – Criesval

एक कंटेनर div बनाएँ। यह सबकुछ आपके पास रखता है, चाहे आप उन्हें लंबवत या क्षैतिज रूप से ढेर करना चाहते हों। तो मोटे तौर पर इसे इस तरह दिखेगा:

<div id="container"> 
    <div class="header"> 
    </div> 

    <div class="navigation"> 
    </div> 

    <div class="left-sidebar"> 
    </div> 

    <div class="content"> 
    </div> 
</div>

और अपने सीएसएस

#container { 
width:960px; 
} 
.header, .navigation { 
width: 100%; 
float:left; 
height: 80px; 
} 
.sidebar { 
width: 200px; 
float:left; 
min-height: 500px; 
} 
.content { 
width: 760px; 
float: left; 
min-height: 500px; 
}

स्रोत

2013-07-26 02:08:50

यह पूरी तरह से काम करता है! लेकिन, एक नया कंटेनर बनाने के बजाय, मैंने बस सीएसएस को बॉडी कंटेनर में जोड़ा। क्या मैं भविष्य में किसी भी समस्या का सामना करूंगा? – Criesval

नहीं जो काम करता है, लेकिन आमतौर पर अधिक विशिष्ट होने के कारण बेहतर है, क्योंकि की परतें होने पर फिर वास्तविक कंटेनर प्रदाता अधिक लचीलापन !! :) –

आपने 'चौड़ाई: 100%' तत्व क्यों फ़्लोट किया? @IntactDev, यह एक स्पष्ट "कंटेनर" रखने के लिए बहुत मानक है जिसे आप शरीर के भीतर छेड़छाड़ करते हैं। – Trojan

आप सीएसएस तत्वों को एक दूसरे के नीचे सीधे कैसे स्थान देते हैं?

उत्तर

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