नीचे या आधार रेखा के लिए DIV संरेखित करें

94

मैं पेरेंट डिव टैग के नीचे या बेसलाइन में चाइल्ड डिव टैग को संरेखित करने की कोशिश कर रहा हूं।

मैं बस इतना करना चाहता हूं कि बच्चे को पैरेंट डिव के बेसलाइन पर Div करें, यहाँ पर अब ऐसा लगता है:

एचटीएमएल

<div id="parentDiv">
<div class="childDiv"></div>
</div>

सीएसएस

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

ध्यान दें

मेरे पास childDivअलग-अलग ऊंचाइयों के साथ कई एस होंगे , और मुझे आधार रेखा / तल पर संरेखित करने के लिए उन सभी की आवश्यकता होगी।

html css

— SIA
स्रोत

सोच भी नहीं रहा था! मैंने अभी पैरेंटडिव पर ऊंचाई हटा दी है और सभी चाइल्डडिव अब बेसलाइन पर बैठते हैं। im बस एक मूर्खतापूर्ण सैली!

— सिया

लेकिन अगर आप चाहते हैं कि इसमें कुछ विशिष्ट ऊँचाई हो - तो आपको absoluteमाता-पिता के अनुसार स्थिति का उपयोग करना चाहिए ।

— वाई। शोहम

154

आपको इसे जोड़ने की आवश्यकता है:

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

absoluteतत्व की घोषणा करते समय , यह अपने निकटतम माता-पिता के अनुसार स्थित होता है जो नहीं है static(यह होना चाहिए absolute, relativeया fixed)।

— वाई। शोहम
स्रोत

7

मुझे संदेह है कि वह जो चाहता है, वर्तमान में यह सभी को अलग कर देगा (ऐसा लगता है जैसे कि कई बच्चे तत्व होंगे यदि एक दूसरे के शीर्ष पर इसका गतिशील बार चार्ट)।

— crmepham

50

सात साल बाद ऊर्ध्वाधर संरेखण की खोज अभी भी इस सवाल को सामने लाती है, इसलिए मैं अब हमारे पास उपलब्ध एक और समाधान पोस्ट करूंगा: फ्लेक्सबॉक्स स्थिति। बस display:flex; justify-content: flex-end; flex-direction: columnपैरेंट डिव पर सेट (इस फिडेल में भी प्रदर्शित ):

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}

— gcbenison
स्रोत

1

सरल। बिल्कुल वही जो मैं चाहता था। उपयोग करें align-items: flex-start;यदि आप आइटम स्ट्रेच नहीं करना चाहते हैं।

— माधवन

यह इन दिनों सबसे अच्छा जवाब है!

— रेंस ग्रोवेनल्ड

12

तालिका और तालिका-सेल के सीएसएस प्रदर्शन मूल्यों का उपयोग करें:

एचटीएमएल

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

सीएसएस

html,body {
    width: 100%;
    height: 100%;
}
.valign {
    display: table;
    width: 100%;
    height: 100%;
}
.valign > div {
    display: table-cell;
    width: 100%;
    height: 100%;
}
.valign.bottom > div {
    vertical-align: bottom;
}

मैंने यहाँ एक JSBin डेमो बनाया है: http://jsbin.com/inonAkuF/2/edit

डेमो में एक उदाहरण भी है कि एक ही तकनीक का उपयोग करके लंबवत केंद्र संरेखित कैसे करें।

— romiem
स्रोत

1

टेबलों को जितनी गंदगी मिलती है, कभी-कभी यह सबसे अच्छा उपाय है

— Sean256

यह मेरे लिए सबसे अच्छा समाधान था

— कटोरा ० the

यह वास्तव में सबसे अच्छा समाधान है, क्योंकि पूरी तरह से तैनात तत्वों का उपयोग करने से आमतौर पर मूल तत्व की ऊंचाई बदल जाती है

— हैमंचेज़

7

यह काम करता है (मैं केवल परीक्षण अर्थात & ff):

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

उम्मीद है की वो मदद करदे।

— pstanton
स्रोत

5

Y. Shoham (निरपेक्ष स्थिति का उपयोग करके) द्वारा पोस्ट किया गया जवाब ज्यादातर मामलों में सबसे सरल समाधान लगता है, जहां कंटेनर एक निश्चित ऊंचाई है, लेकिन अगर माता-पिता DIV को कई DIV और ऑटो को समायोजित करना है तो यह गतिशील सामग्री के आधार पर ऊंचाई है, फिर कोई समस्या हो सकती है। मुझे गतिशील सामग्री के दो ब्लॉक की आवश्यकता थी; एक कंटेनर के ऊपर और एक नीचे से जुड़ा हुआ है और हालांकि मैं कंटेनर को शीर्ष DIV के आकार को समायोजित करने के लिए प्राप्त कर सकता हूं, अगर नीचे से जुड़ा हुआ DIV लंबा था, तो यह कंटेनर का आकार नहीं बदलेगा, लेकिन बाहर विस्तारित होगा । टेबल स्टाइल पोजिशनिंग का उपयोग करते हुए रोमियाम द्वारा ऊपर उल्लिखित विधि, हालांकि थोड़ा अधिक जटिल है, इस संबंध में अधिक मजबूत है और कंटेनर के नीचे और सही ऑटो ऊंचाई के लिए संरेखण की अनुमति है।

सीएसएस

#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}

एचटीएमएल

<div id=“container”>
    <div id=“top”>Dynamic content aligned to top of #container</div>
    <div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>

मुझे लगता है कि यह एक नया जवाब नहीं है, लेकिन मैं इस दृष्टिकोण पर टिप्पणी करना चाहता था क्योंकि यह मुझे अपना समाधान खोजने के लिए प्रेरित करता है लेकिन एक नौसिखिया के रूप में मुझे टिप्पणी करने की अनुमति नहीं थी, केवल पोस्ट।

— निक गिलार्ड
स्रोत

3

आप शायद बच्चे को करने के लिए div सेट करना होगा position: absolute।

अपनी बाल शैली को अपडेट करें

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

— RAVIA
स्रोत

मैंने कोशिश की कि, लेकिन मुझे क्या चाहिए चाइल्ड डिव का निचला हिस्सा पेरेंटिव के तल पर बैठना है, ग्राफ डायनामिक होना है, और हाइट्स प्रत्येक चाइल्डडिव से अगले तक अलग-अलग होंगे ... पोजिशनिंग काम कर सकती है, लेकिन मैं हवलदार हूं लगा कि कुछ ठोस है ...

— सिया

5

207 सेट करने के लिए एक अच्छा विचार नहीं है (कुछ मनमाना संख्या) नीचे सेट करने के लिए बेहतर है: 0

— pstanton

2

एक पुरानी पोस्ट, लेकिन मैंने सोचा कि किसी को भी देखने का जवाब साझा करूंगा। और क्योंकि जब आप absoluteचीजों का उपयोग करते हैं तो गलत हो सकता है। मैं क्या करूँगा

एचटीएमएल

<div id="parentDiv"></div>
<div class="childDiv"></div>

सीएसएस

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

और वह बस उस निचले हिस्से को माता-पिता के div में वापस बैठा देगा। अधिकांश ब्राउज़रों के लिए भी सुरक्षित है

यह चाइल्डडिव को पेरेंटिव के तल पर आधा कर देगा। आपको मार्जिन-टॉप पर उपयोग -40px कम से कम करने की आवश्यकता है। इसके अलावा स्थिति का उपयोग करने के लिए इसका सबसे अच्छा अभ्यास: रिश्तेदार; इस मामले में दोनों डिवीजनों के लिए।

— ऑगस

1

मेरे पास कुछ ऐसा ही था और इसे प्रभावी रूप से बच्चे के लिए कुछ पैडिंग-टॉप जोड़कर काम करने के लिए मिला ।

मुझे यकीन है कि कुछ अन्य उत्तर यहां समाधान के लिए मिलेंगे, लेकिन मैं उन्हें बहुत समय के बाद आसानी से काम करने के लिए नहीं मिला; मैंने इसके बजाय पैडिंग-टॉप सॉल्यूशन के साथ समाप्त किया, जो इसकी सादगी में सुरुचिपूर्ण है, लेकिन मेरे लिए एक प्रकार का हैकिश लगता है (पिक्सेल मूल्य का उल्लेख नहीं करना संभवत: यह माता-पिता की ऊंचाई पर निर्भर करेगा)।

— cellepo
स्रोत

0

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}

<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>

स्निपेट का विस्तार करें

यह मेरा समाधान है

— NEM
स्रोत

-6

यदि आप अपने माता-पिता के कई बच्चों को तलाक दे रहे हैं, तो आप ऊर्ध्वाधर-संरेखित संपत्ति का उपयोग नीचे की तरह कर सकते हैं:

.Parent div
{
  vertical-align : bottom;
}

— पवन
स्रोत

टिप्पणियों के बिना इसके लिए इतने नीचे वोट क्यों? क्या इससे समस्या हल नहीं होती? शोध ऑनलाइन सुझाव यह चाहिए।

— शोलेप्प