DIV'leri alta veya tabana hizalayın

Question 1

Bir alt div etiketini üst div etiketinin altına veya taban çizgisine hizalamaya çalışıyorum.

Tek yapmak istediğim, Ana Div'in temelindeki Div çocuğuna sahip olmak, işte şimdi göründüğü gibi:

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

Not

childDivFarklı yükseklikleri olan birden fazla s'ye sahip olacağım ve hepsinin taban çizgisine / dibe hizalanmasına ihtiyacım olacak.

Question 2

Bunu eklemeniz gerekiyor:

#parentDiv {
  position: relative;
}

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

Bildirirken absoluteelemanı değil en yakın ana göre konumlandırılır static(olması gereken absolute, relativeya da fixed).

Question 3

Yedi yıl sonra dikey hizalama için yapılan aramalar hala bu soruyu gündeme getiriyor, bu yüzden şimdi kullanabileceğimiz başka bir çözümü göndereceğim: flexbox konumlandırma. Sadece display:flex; justify-content: flex-end; flex-direction: columnüst div'i ayarlayın (bu kemanla da gösterilmiştir ):

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

Question 4

Tablo ve tablo hücresinin CSS görüntüleme değerlerini kullanın:

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

Burada bir JSBin demosu oluşturdum: http://jsbin.com/INOnAkuF/2/edit

Demo ayrıca aynı tekniği kullanarak dikey olarak nasıl ortalanacağına dair bir örneğe sahiptir.

Question 5

bu çalışır (sadece i & ff test ettim):

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

umarım yardımcı olur.

Question 6

Y. Shoham tarafından gönderilen yanıt (mutlak konumlandırma kullanarak), kabın sabit bir yükseklik olduğu çoğu durumda en basit çözüm gibi görünmektedir, ancak ana DIV birden çok DIV içermeli ve yüksekliğini dinamik içeriğe göre otomatik olarak ayarlamalıysa, o zaman bir sorun olabilir. İki blok dinamik içeriğe ihtiyacım vardı; biri kabın üstüne, diğeri aşağıya hizalandı ve kabı üst DIV'nin boyutuna göre ayarlayabilsem de, alt tarafa hizalanan DIV daha uzun olsaydı, kabı yeniden boyutlandırmazdı ancak dışarıya uzanırdı . Yukarıda, masa tarzı konumlandırma kullanan romiem tarafından ana hatları verilen yöntem, biraz daha karmaşık olmasına rağmen, bu açıdan daha sağlamdır ve kabın tabanına hizalanmasına ve doğru otomatik yüksekliğine izin verir.

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>

Bunun yeni bir cevap olmadığının farkındayım, ancak bu yaklaşım hakkında yorum yapmak istedim çünkü bu beni çözümümü bulmaya yönlendirdi, ancak bir acemi olarak yorum yapmama izin verilmedi, sadece gönderi.

Question 7

Muhtemelen çocuk div'i sahip olacak şekilde ayarlamanız gerekirdi position: absolute.

Çocuğunuzun stilini şu şekilde güncelleyin:

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

Question 8

Eski bir gönderi ama arayan herkes için bir cevabı paylaşacağımı düşündüm. Ve çünkü kullandığınızda absoluteişler ters gidebilir. Ne yapardım

HTML

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

Css

parentDiv{

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

Ve bu sadece alttaki div'i üst div'e geri yerleştirir. çoğu tarayıcı için de güvenli

Question 9

Benzer bir şeye sahiptim ve çocuğa etkili bir şekilde bir ped ekleyerek çalışmasını sağladım .

Eminim buradaki diğer cevaplardan bazıları çözüme ulaşacaktır, ancak çok zaman sonra onları kolayca çalıştırmayı başaramadım; Bunun yerine, basitliği açısından zarif, ancak bana biraz hile gibi görünen padding-top çözümünü buldum (belirlediği piksel değerinden bahsetmiyorum bile, muhtemelen ebeveyn yüksekliğine bağlı olacaktır).

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>

Snippet'i genişlet

Bu benim çözümüm

Question 11

Üst Div'inizde birden fazla alt Div varsa, dikey hizalama özelliğini aşağıdaki gibi kullanabilirsiniz:

.Parent div
{
  vertical-align : bottom;
}