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

Answer 1

96

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.

html css sia
źródło

nawet nie myślałem! właśnie usunąłem wysokość z parentDiv i wszyscy childDiv siedzą teraz na linii bazowej. jestem po prostu głupią głupią!

sia

Ale jeśli chcesz, aby miał jakąś określoną wysokość - powinieneś zastosować absolutepozycjonowanie zgodnie z rodzicem.

Y. Shoham

Answer 2

nawet nie myślałem! właśnie usunąłem wysokość z parentDiv i wszyscy childDiv siedzą teraz na linii bazowej. jestem po prostu głupią głupią!

sia

Answer 3

Ale jeśli chcesz, aby miał jakąś określoną wysokość - powinieneś zastosować absolutepozycjonowanie zgodnie z rodzicem.

Y. Shoham

Answer 4

157

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

Y. Shoham
źródło

7

Wątpię, czy robi to, czego chce, obecnie to umieści wszystkie (wygląda na to, że będzie wiele elementów podrzędnych, jeśli jest to dynamiczny wykres słupkowy) jeden na drugim.

crmepham,

Answer 5

7

Wątpię, czy robi to, czego chce, obecnie to umieści wszystkie (wygląda na to, że będzie wiele elementów podrzędnych, jeśli jest to dynamiczny wykres słupkowy) jeden na drugim.

crmepham,

Answer 6

54

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
}

gcbenison
źródło

1

Prosty. Dokładnie to, czego chciałem. Użyj, align-items: flex-start;jeśli nie chcesz rozciągać elementów.

Madhan

To najlepsza odpowiedź w dzisiejszych czasach!

Rens Groenveld

justify-content: flex-end znika z mojego paska przewijania

kta

Answer 7

1

Prosty. Dokładnie to, czego chciałem. Użyj, align-items: flex-start;jeśli nie chcesz rozciągać elementów.

Madhan

Answer 8

To najlepsza odpowiedź w dzisiejszych czasach!

Rens Groenveld

Answer 9

justify-content: flex-end znika z mojego paska przewijania

kta

Answer 10

12

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.

romiem
źródło

1

Za tyle gówna, ile dostają stoły, czasami jest to najlepsze rozwiązanie

Sean 256,

to było dla mnie najlepsze rozwiązanie

bowlerae

To naprawdę najlepsze rozwiązanie, ponieważ użycie elementów pozycjonowanych absolutnie zazwyczaj zmienia wysokość elementu nadrzędnego

hamncheez

Answer 11

1

Za tyle gówna, ile dostają stoły, czasami jest to najlepsze rozwiązanie

Sean 256,

Answer 12

to było dla mnie najlepsze rozwiązanie

bowlerae

Answer 13

To naprawdę najlepsze rozwiązanie, ponieważ użycie elementów pozycjonowanych absolutnie zazwyczaj zmienia wysokość elementu nadrzędnego

hamncheez

Answer 14

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.

Answer 15

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

Answer 16

3

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

Ravia
źródło

Próbowałem tego, ale potrzebuję dolnej części childDiv, aby usiąść na dole parentDiv, wykres ma być dynamiczny, a wysokości będą się różnić dla każdego dziecka Div do następnego ... pozycjonowanie może działać, ale nie mam przestałem wymyślić coś, co jest solidne ...

sia

5

nie jest dobrym pomysłem ustawienie góry na 207 (jakąś dowolną liczbę), lepiej ustawić dół: 0

pstanton

Answer 17

Próbowałem tego, ale potrzebuję dolnej części childDiv, aby usiąść na dole parentDiv, wykres ma być dynamiczny, a wysokości będą się różnić dla każdego dziecka Div do następnego ... pozycjonowanie może działać, ale nie mam przestałem wymyślić coś, co jest solidne ...

sia

Answer 18

5

nie jest dobrym pomysłem ustawienie góry na 207 (jakąś dowolną liczbę), lepiej ustawić dół: 0

pstanton

Answer 19

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

Answer 20

To sprawi, że childDiv będzie w połowie na dole parentDiv. Musisz przynajmniej użyć -40px na górze marginesu. Najlepszą praktyką jest również używanie pozycji: względna; w tym przypadku dla obu elementów div.

Augus

Answer 21

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

Answer 22

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

Answer 23

-6

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

Pawan
źródło

Dlaczego tak wiele głosów „w dół” na to bez komentarzy? Czy to nie rozwiązuje problemu? Badania online sugerują, że powinno.

sholsapp,

Answer 24

Dlaczego tak wiele głosów „w dół” na to bez komentarzy? Czy to nie rozwiązuje problemu? Badania online sugerują, że powinno.

sholsapp,

Dopasuj DIV do dołu lub linii bazowej

Odpowiedzi: