Căn chỉnh DIV xuống dưới cùng hoặc đường cơ sở

Question 1

Tôi đang cố gắng căn chỉnh thẻ div con ở cuối hoặc đường cơ sở của thẻ div mẹ.

Tất cả những gì tôi muốn làm là có Div con ở đường cơ sở của Div cha, đây là giao diện bây giờ:

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

Ghi chú

Tôi sẽ có nhiều childDivs với các độ cao khác nhau và tôi sẽ cần tất cả chúng để căn chỉnh với đường cơ sở / đáy.

Question 2

Bạn cần thêm điều này:

#parentDiv {
  position: relative;
}

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

Khi khai báo absolutephần tử, nó được định vị theo phần tử cha gần nhất của nó mà không phải static(nó phải là absolute, relativehoặc fixed).

Question 3

Bảy năm sau, các tìm kiếm về căn chỉnh dọc vẫn đưa ra câu hỏi này, vì vậy tôi sẽ đăng một giải pháp khác mà chúng tôi có sẵn cho chúng tôi bây giờ: định vị flexbox. Chỉ cần đặt display:flex; justify-content: flex-end; flex-direction: columntrên div cha (cũng được minh họa trong fiddle này ):

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

Question 4

Sử dụng các giá trị hiển thị CSS của bảng và ô bảng:

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

Tôi đã tạo bản demo JSBin tại đây: http://jsbin.com/INOnAkuF/2/edit

Bản demo cũng có một ví dụ về cách căn giữa theo chiều dọc bằng kỹ thuật tương tự.

Question 5

điều này hoạt động (tôi chỉ thử nghiệm tức là & 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>

hy vọng rằng sẽ giúp.

Question 6

Câu trả lời được đăng bởi Y. Shoham (sử dụng định vị tuyệt đối) có vẻ là giải pháp đơn giản nhất trong hầu hết các trường hợp khi vùng chứa có chiều cao cố định, nhưng nếu DIV chính phải chứa nhiều DIV và tự động điều chỉnh chiều cao của nó dựa trên nội dung động, thì có thể có một vấn đề. Tôi cần có hai khối nội dung động; một căn chỉnh ở phía trên cùng của vùng chứa và một ở phía dưới và mặc dù tôi có thể điều chỉnh vùng chứa theo kích thước của DIV trên cùng, nhưng nếu DIV căn chỉnh ở phía dưới cao hơn, nó sẽ không thay đổi kích thước vùng chứa mà sẽ mở rộng ra bên ngoài . Phương pháp được romiem nêu ở trên bằng cách sử dụng định vị kiểu bảng, mặc dù phức tạp hơn một chút, về mặt này mạnh mẽ hơn và cho phép căn chỉnh đến đáy và chiều cao tự động chính xác của vùng chứa.

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>

Tôi nhận thấy đây không phải là một câu trả lời mới nhưng tôi muốn bình luận về cách tiếp cận này vì nó dẫn tôi đến việc tìm ra giải pháp của mình nhưng là một người mới, tôi không được phép nhận xét, chỉ đăng bài.

Question 7

Bạn có thể sẽ phải đặt div con để có position: absolute.

Cập nhật phong cách con bạn thành

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

Question 8

Một bài viết cũ nhưng tôi nghĩ rằng tôi sẽ chia sẻ một câu trả lời cho bất kỳ ai đang tìm kiếm. Và bởi vì khi bạn sử dụng absolutemọi thứ có thể gặp trục trặc. Những gì tôi sẽ làm là

HTML

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

Css

parentDiv{

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

Và điều đó sẽ chỉ đặt div dưới cùng đó trở lại vào div cha. cũng an toàn cho hầu hết các trình duyệt

Question 9

Tôi đã có một cái gì đó tương tự và nó hoạt động hiệu quả bằng cách thêm một số padding-top cho đứa trẻ.

Tôi chắc rằng một số câu trả lời khác ở đây sẽ đưa ra giải pháp, nhưng tôi không thể làm cho chúng dễ dàng hoạt động sau rất nhiều thời gian; Thay vào đó, tôi đã kết thúc với giải pháp padding-top rất thanh lịch vì sự đơn giản của nó, nhưng có vẻ hơi khó hiểu đối với tôi (chưa kể giá trị pixel mà nó đặt có thể sẽ phụ thuộc vào chiều cao gốc).

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>

Mở rộng đoạn mã

Đây là giải pháp của tôi

Question 11

Nếu bạn đang có nhiều Div con bên trong Div mẹ của mình, thì bạn có thể sử dụng thuộc tính vertical-align như sau:

.Parent div
{
  vertical-align : bottom;
}