Выровняйте DIV к нижней части или базовой линии

Question

Выровняйте DIV к нижней части или базовой линии

Я пытаюсь выровнять дочерний тег Div к нижней части или базовой линии родительского тега 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;
}

Примечание:

У меня будут несколько childDivs с переменными высотами, и мне будут нужны они все для выравнивания к базовой линии/нижней части.

85

html css

задан Laurel 12 April 2016 в 23:53

3 ответа

Другие вопросы по тегам:

html css

Похожие вопросы:

score 3 · Answer 1

[

] Скорее всего, вам придется установить дочерний div в положение []: absolute[].[

] [

] Обновите стиль вашего ребенка до [

] [

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

]

score 7 · Answer 2

это работает (я только проверил 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>

надеюсь, это поможет.

score 148 · Answer 3

Вам нужно добавить это:

#parentDiv {
  position: relative;
}

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

При объявлении элемента абсолютным он позиционируется в соответствии с ближайшим родителем, который не является статическим (он должен быть абсолютным, относительным или фиксированным).