html - एक div की सामग्री को नीचे कैसे संरेखित करें?




css vertical-alignment (16)

2015 समाधान

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

आपका स्वागत है

मान लें कि मेरे पास निम्न सीएसएस और एचटीएमएल कोड है:

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

हेडर अनुभाग निश्चित ऊंचाई है, लेकिन हेडर सामग्री बदल सकती है। मैं शीर्षलेख अनुभाग के निचले हिस्से में लंबवत रूप से गठबंधन करने के लिए शीर्षलेख की सामग्री करना चाहता हूं, इसलिए शीर्ष लेख अनुभाग के नीचे पाठ "चिपकने" की अंतिम पंक्ति।

तो यदि पाठ की केवल एक पंक्ति है तो यह इस तरह होगा:

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

और यदि तीन पंक्तियां थीं:

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

सीएसएस में यह कैसे किया जा सकता है?


इसके लिए आपको पूर्ण + रिश्तेदार की आवश्यकता नहीं है। कंटेनर और डेटा दोनों के लिए सापेक्ष स्थिति का उपयोग करना बहुत संभव है। इसे आपको इसी तरह करना होगा।

मान लें कि आपके डेटा की ऊंचाई x । आपका कंटेनर सापेक्ष है और पाद लेख भी रिश्तेदार है। आपको बस इतना करना है कि आप अपने डेटा में जोड़ दें

bottom: -webkit-calc(-100% + x);

आपका डेटा हमेशा आपके कंटेनर के नीचे होगा। यदि आपके पास गतिशील ऊंचाई के साथ कंटेनर है तो भी काम करता है।

एचटीएमएल इस तरह होगा

<div class="container">
  <div class="data"></div>
</div>

सीएसएस इस तरह होगा

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

यहां लाइव उदाहरण

उम्मीद है की यह मदद करेगा।


इसे करने का सबसे आसान तरीका यहां है। बेशक, यह IE8 द्वारा समर्थित नहीं है, क्योंकि उपयोगकर्ता को 7 साल पहले की आवश्यकता थी। आपको जो समर्थन करने की आवश्यकता है उसके आधार पर, इनमें से कुछ को दूर किया जा सकता है।

फिर भी, यह अच्छा होगा अगर बाहरी कंटेनर के बिना ऐसा करने का कोई तरीका था, तो टेक्स्ट को अपने आप में स्वयं संरेखित करें।

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

एक आदर्श क्रॉस-ब्राउज़र उदाहरण शायद यह यहां है:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

विचार दोनों नीचे div को प्रदर्शित करने और इसे वहां चिपकाने के लिए है। अक्सर सरल दृष्टिकोण मुख्य सामग्री के साथ चिपचिपा div scroll up बना देगा।

निम्नलिखित एक पूरी तरह से काम कर रहे न्यूनतम उदाहरण है। ध्यान दें कि कोई div एम्बेडिंग ट्रिकरी आवश्यक नहीं है। कई बीआरएस सिर्फ एक स्क्रॉलबार को प्रकट करने के लिए मजबूर कर रहे हैं:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

यदि आप सोच रहे हैं कि आपका कोड IE पर काम नहीं कर रहा है, तो शीर्ष पर DOCTYPE टैग को जोड़ना याद रखें। आईई पर काम करने के लिए यह महत्वपूर्ण है। साथ ही, यह पहला टैग होना चाहिए और इसके ऊपर कुछ भी नहीं दिखना चाहिए।


ऐसा करने का आधुनिक तरीका flexbox का उपयोग flexbox । नीचे उदाहरण देखें। आपको Some text... किसी भी HTML टैग में लपेटने की भी आवश्यकता नहीं है, क्योंकि एक फ्लेक्स कंटेनर में सीधे पाठ को अज्ञात फ्लेक्स आइटम में लपेटा जाता है।

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

यदि केवल कुछ पाठ है और आप कंटेनर के नीचे लंबवत रूप से संरेखित करना चाहते हैं।

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}
<section>Some text aligns to the bottom</section>


काम करने लगता है:

एचटीएमएल: मैं नीचे हूँ

सीएसएस:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

कुछ समय के लिए इस मुद्दे के साथ संघर्ष करने के बाद, आखिरकार मैंने एक समाधान निकाला जो मेरी सभी आवश्यकताओं को पूरा करता है:

  • यह आवश्यक नहीं है कि मैं कंटेनर की ऊंचाई को जानता हूं।
  • रिश्तेदार + पूर्ण समाधान के विपरीत, सामग्री अपनी परत में नहीं चलती है (यानी, यह आमतौर पर कंटेनर div में एम्बेड होती है)।
  • ब्राउज़रों (आईई 8 +) में काम करता है।
  • लागू करने के लिए सरल।

समाधान सिर्फ एक <div> लेता है, जिसे मैं "संरेखक" कहता हूं:

सीएसएस

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

एचटीएमएल

<div class="bottom_aligner"></div>
... Your content here ...

यह चाल एक लंबा, पतला div बनाकर काम करती है, जो कंटेनर के नीचे पाठ आधार रेखा को धक्का देती है।

यहां एक पूरा उदाहरण दिया गया है जो ओपी के बारे में पूछ रहा था। मैंने केवल प्रदर्शन उद्देश्यों के लिए "bottom_aligner" मोटी और लाल बना दिया है।

सीएसएस:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>


क्लाइंट के लिए मैंने जो साइट अभी किया है, अनुरोध किया है कि पाद लेख टेक्स्ट एक उच्च बॉक्स था, नीचे दिए गए पाठ को मैंने सरल पैडिंग के साथ हासिल किया था, सभी ब्राउज़रों के लिए काम करना चाहिए।

<div id="footer">
  some text here
</div>
#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

मुझे पता है कि यह 2 साल से अधिक पुराना है, लेकिन मैंने एक ऐसा तरीका तैयार किया है जो उल्लेख किया गया है उससे कहीं अधिक सरल है।

हेडर div की ऊंचाई सेट करें। फिर उसके अंदर, अपने एच 1 टैग को निम्नानुसार स्टाइल करें:

float: left;
padding: 90px 10px 11px

मैं एक क्लाइंट के लिए साइट पर काम कर रहा हूं, और डिज़ाइन को टेक्स्ट को एक निश्चित div के नीचे होना आवश्यक है। मैंने इन दो लाइनों का उपयोग करके परिणाम प्राप्त कर लिया है और यह ठीक काम करता है। साथ ही, यदि पाठ विस्तारित होता है, तो पैडिंग अभी भी वही रहेगी।


मुझे यह समाधान एक डिफ़ॉल्ट बूटस्ट्रैप प्रारंभ टेम्पलेट पर बाध्य पाया गया

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

यदि आप विरासत ब्राउज़र के बारे में चिंतित नहीं हैं तो एक फ्लेक्सबॉक्स का उपयोग करें।

मूल तत्व को इसके डिस्प्ले प्रकार को फ्लेक्स पर सेट करने की आवश्यकता होती है

div.parent {
  display: flex;
  height: 100%;
}

फिर आप बच्चे के तत्व के संरेखण-स्वयं को फ्लेक्स-एंड पर सेट करते हैं।

span.child {
  display: inline-block;
  align-self: flex-end;
}

यहां संसाधन है जिसे मैं सीखने के लिए उपयोग करता हूं: http://css-tricks.com/snippets/css/a-guide-to-flexbox/


यदि आप सामग्री के रैपिंग div की ऊंचाई सेट कर सकते हैं (# हेडर-सामग्री जैसा कि दूसरे के उत्तर में दिखाया गया है), पूरे # शीर्षलेख के बजाय, शायद आप इस दृष्टिकोण को भी आजमा सकते हैं:

एचटीएमएल

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

सीएसएस

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

कोडेन पर दिखाओ


यदि इनलाइन तत्व की तुलना में अभिभावक / ब्लॉक तत्व की रेखा-ऊंचाई अधिक है, तो इनलाइन या इनलाइन-ब्लॉक तत्वों को ब्लॉक स्तर तत्वों के नीचे गठबंधन किया जा सकता है। *

मार्कअप:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

सीएसएस:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* सुनिश्चित करें कि आप मानक मोड में हैं


सापेक्ष + पूर्ण स्थिति आपकी सबसे अच्छी शर्त है:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

लेकिन आप इसके साथ मुद्दों में भाग सकते हैं। जब मैंने कोशिश की तो मुझे सामग्री के नीचे दिखाई देने वाले ड्रॉपडाउन मेनू में समस्याएं थीं। यह सिर्फ सुंदर नहीं है।

ईमानदारी से, लंबवत केंद्रित मुद्दों के लिए और, अच्छी तरह से, आइटम के साथ कोई लंबवत संरेखण समस्या निश्चित ऊंचाई नहीं है, केवल टेबल का उपयोग करना आसान है।

उदाहरण: क्या आप टेबल का उपयोग किए बिना यह HTML लेआउट कर सकते हैं?


#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}
<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>


display: flex;
align-items: flex-end;




vertical-alignment