Dopasuj DIV do dołu lub linii bazowej

Question 1

Próbuję wyrównać podrzędny znacznik DIV do dołu lub linii bazowej nadrzędnego znacznika DIV.

Wszystko, co chcę zrobić, to mieć element podrzędny Div na linii bazowej nadrzędnego elementu Div, oto jak to teraz wygląda:

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

Uwaga

Będę mieć wiele childDivs o różnych wysokościach i będę potrzebować ich wszystkich, aby wyrównać do linii bazowej / do dołu.

Question 2

Musisz to dodać:

#parentDiv {
  position: relative;
}

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

Podczas deklarowania absoluteelementu, jest umieszczona w zależności od jego najbliższego wyjściowej, która nie jest static(musi być absolute, relativei fixed).

Question 3

Siedem lat później poszukiwania wyrównania w pionie wciąż wywołują to pytanie, więc opublikuję inne rozwiązanie, które mamy teraz dostępne: pozycjonowanie flexbox. Po prostu ustaw display:flex; justify-content: flex-end; flex-direction: columnnadrzędny element div (również pokazany na tym skrzypcach ):

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

Question 4

Użyj wyświetlanych wartości CSS tabeli i komórki tabeli:

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

Stworzyłem demo JSBin tutaj: http://jsbin.com/INOnAkuF/2/edit

Demo zawiera również przykład, jak wyśrodkować w pionie przy użyciu tej samej techniki.

Question 5

to działa (przetestowałem tylko ie i 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>

mam nadzieję, że to pomoże.

Question 6

Odpowiedź wysłana przez Y. Shohama (używając pozycjonowania bezwzględnego) wydaje się być najprostszym rozwiązaniem w większości przypadków, gdy kontener ma stałą wysokość, ale jeśli nadrzędny DIV musi zawierać wiele DIV i automatycznie dostosowywać wysokość na podstawie dynamicznej zawartości, to może być problem. Potrzebowałem dwóch bloków zawartości dynamicznej; jeden wyrównany do góry pojemnika i jeden do dołu i chociaż mógłbym dostosować pojemnik do rozmiaru górnego DIV, gdyby DIV wyrównany do dołu był wyższy, nie zmieniłby rozmiaru pojemnika, ale rozciągnąłby się na zewnątrz . Metoda nakreślona powyżej przez romiem wykorzystująca pozycjonowanie w stylu tabeli, choć nieco bardziej skomplikowana, jest pod tym względem solidniejsza i pozwoliła na wyrównanie do dna i poprawną automatyczną wysokość pojemnika.

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>

Zdaję sobie sprawę, że nie jest to nowa odpowiedź, ale chciałem skomentować to podejście, ponieważ doprowadziło mnie do znalezienia rozwiązania, ale jako nowicjusz nie pozwolono mi komentować, tylko pisać.

Question 7

Prawdopodobnie musiałbyś ustawić podrzędny element div position: absolute.

Zaktualizuj styl swojego dziecka do

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

Question 8

Stary post, ale pomyślałem, że podzielę się odpowiedzią dla każdego, kto szuka. A ponieważ kiedy używasz, absoluterzeczy mogą się nie udać. Co bym zrobił

HTML

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

Css

parentDiv{

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

I to po prostu ustawiłoby ten dolny div z powrotem w nadrzędnym div. bezpieczny również dla większości przeglądarek

Question 9

Miałem coś podobnego i sprawiłem, że zadziałało, skutecznie dodając dziecku trochę wyściółki .

Jestem pewien, że niektóre inne odpowiedzi przyniosłyby rozwiązanie, ale nie mogłem sprawić, by po długim czasie działały łatwo; Zamiast tego otrzymałem rozwiązanie padding-top, które jest eleganckie w swojej prostocie, ale wydaje mi się trochę hakerskie (nie wspominając o ustawionej przez siebie wartości piksela, która prawdopodobnie zależałaby od wysokości rodzica).

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>

Rozwiń fragment

To jest moje rozwiązanie

Question 11

Jeśli masz wiele podrzędnych elementów Div w nadrzędnym bloku Div, możesz użyć właściwości wyrównania w pionie, jak poniżej:

.Parent div
{
  vertical-align : bottom;
}