จัดแนว DIV ให้ชิดด้านล่างหรือด้านล่าง

Question 1

ฉันกำลังพยายามจัดแท็ก div ลูกให้อยู่ด้านล่างหรือพื้นฐานของแท็ก div ระดับบนสุด

สิ่งที่ฉันต้องการทำคือให้ลูก Div อยู่ที่พื้นฐานของ Parent Div นี่คือสิ่งที่ดูเหมือนตอนนี้:

HTML

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

CSS

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

บันทึก

ฉันจะมีหลายตัวchildDivที่มีความสูงแตกต่างกันและฉันจะต้องใช้มันทั้งหมดเพื่อให้อยู่ในแนวเดียวกัน

Question 2

คุณต้องเพิ่มสิ่งนี้:

#parentDiv {
  position: relative;
}

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

เมื่อประกาศabsoluteองค์ประกอบมันอยู่ในตำแหน่งตามไปยังผู้ปกครองที่ใกล้ที่สุดของที่ไม่ได้static(มันจะต้องเป็นabsolute, relativeหรือfixed)

Question 3

เจ็ดปีต่อมาการค้นหาการจัดตำแหน่งแนวตั้งยังคงเกิดคำถามนี้ดังนั้นฉันจะโพสต์วิธีแก้ปัญหาอื่นที่เรามีให้เราในตอนนี้: การวางตำแหน่ง flexbox เพียงแค่ตั้งค่าdisplay:flex; justify-content: flex-end; flex-direction: columnบน div หลัก (แสดงในซอนี้ด้วย):

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

Question 4

ใช้ค่าการแสดง CSS ของตารางและเซลล์ตาราง:

HTML

<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>

CSS

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

การสาธิตยังมีตัวอย่างวิธีจัดตำแหน่งกึ่งกลางแนวตั้งโดยใช้เทคนิคเดียวกัน

Question 5

ใช้งานได้ (ฉันทดสอบเฉพาะ ie & 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>

หวังว่าจะช่วยได้

Question 6

คำตอบที่โพสต์โดย Y. Shoham (โดยใช้การกำหนดตำแหน่งแบบสัมบูรณ์) ดูเหมือนจะเป็นวิธีแก้ปัญหาที่ง่ายที่สุดในกรณีส่วนใหญ่ที่คอนเทนเนอร์มีความสูงคงที่ แต่ถ้า DIV หลักต้องมี DIV หลายตัวและปรับความสูงโดยอัตโนมัติตามเนื้อหาแบบไดนามิก อาจมีปัญหา ฉันจำเป็นต้องมีเนื้อหาไดนามิกสองช่วงตึก หนึ่งจัดชิดกับด้านบนของคอนเทนเนอร์และอีกอันหนึ่งอยู่ด้านล่างและแม้ว่าฉันจะได้รับคอนเทนเนอร์เพื่อปรับขนาดของ DIV ด้านบน แต่ถ้า DIV ที่อยู่ด้านล่างสูงขึ้นมันจะไม่ปรับขนาดคอนเทนเนอร์ แต่จะขยายออกไปข้างนอก . วิธีการที่ระบุไว้ข้างต้นโดย romiem โดยใช้การวางตำแหน่งสไตล์ตารางแม้ว่าจะซับซ้อนกว่าเล็กน้อย แต่ก็มีประสิทธิภาพมากกว่าในแง่นี้และอนุญาตให้จัดแนวไปที่ด้านล่างและแก้ไขความสูงอัตโนมัติของคอนเทนเนอร์

CSS

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

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

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

HTML

<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>

ฉันตระหนักดีว่านี่ไม่ใช่คำตอบใหม่ แต่ฉันต้องการแสดงความคิดเห็นเกี่ยวกับแนวทางนี้เพราะมันทำให้ฉันพบวิธีแก้ปัญหา แต่ในฐานะมือใหม่ฉันไม่ได้รับอนุญาตให้แสดงความคิดเห็นโพสต์เท่านั้น

Question 7

คุณอาจจะต้องตั้งค่า div ย่อยให้มี position: absoluteเด็กที่จะมี

อัปเดตสไตล์เด็กของคุณเป็น

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

Question 8

โพสต์เก่า แต่คิดว่าฉันจะแบ่งปันคำตอบสำหรับทุกคนที่กำลังมองหา และเพราะว่าเมื่อคุณใช้absoluteสิ่งต่างๆอาจผิดพลาดได้ สิ่งที่ฉันจะทำคือ

HTML

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

Css

parentDiv{

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

และนั่นก็จะนั่ง div ด้านล่างนั้นกลับไปที่ div หลัก ปลอดภัยสำหรับเบราว์เซอร์ส่วนใหญ่ด้วย

Question 9

ฉันมีบางอย่างที่คล้ายกันและทำให้มันใช้งานได้โดยการเพิ่มช่องว่างภายในอย่างมีประสิทธิภาพให้กับเด็กอย่างมีประสิทธิภาพ

ฉันแน่ใจว่าคำตอบอื่น ๆ ที่นี่จะสามารถแก้ปัญหาได้ แต่ฉันไม่สามารถทำให้พวกเขาทำงานได้อย่างง่ายดายหลังจากผ่านไปนาน ๆ ฉันลงเอยด้วยโซลูชัน padding-top แทนซึ่งดูหรูหราในความเรียบง่าย แต่ดูเหมือนว่าจะแฮ็คสำหรับฉัน (ไม่ต้องพูดถึงค่าพิกเซลที่ตั้งไว้อาจขึ้นอยู่กับความสูงของผู้ปกครอง)

Question 10

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>

ขยายข้อมูลโค้ด

นี่คือทางออกของฉัน

Question 11

หากคุณมี Div ย่อยหลายตัวใน Div หลักของคุณคุณสามารถใช้คุณสมบัติแนวตั้งได้ดังนี้:

.Parent div
{
  vertical-align : bottom;
}