web-dev-qa-db-ja.com

Absoluteを使用せずに、divを別のdivの下部に配置する

別のdivに1つのdivがあります。内側のdivには0のマージンがあり、自動化して中央に配置します。しかし、絶対にせずに底に浮かせることはできません。とにかく、通常のdivの下部に相対divをフロートさせる方法はありますか？

htmlcssimagecss-floatrelative
13
user3506938

position: absoluteを使用しないと、垂直方向に揃える必要があります。

vertical-align: bottomを使用できます。これは docs に従って：

CSSのvertical-alignプロパティは、インラインボックスまたはテーブルセルボックスの垂直方向の配置を指定します。

そのため、外側のdivをインライン要素として設定するか、table-cellとして設定します。

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: bottom;
}

#inner {
  border: 1px solid green;
  height: 50px;
}
<div id="outer">
  <div id="inner">
  </div>
</div>
15
LcSalazar

最近では、これらすべてのアライメントの問題にdisplay: flexを使用できます。

あなたの場合、親を単にflex、flex-direction column（デフォルトはrow）、justify-content: flex-endにすることができます。このアプローチの利点は、親に複数のアイテムがある場合にも機能することです。

複数のものがあり、それらをすべて親の先頭から最後まで揃えたい場合は、justify-contentをspace-betweenやspace-evenlyなどの別のプロパティに変更できます。

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#inner {
  border: 1px solid green;
  height: 50px;
}
<div id="outer">
  <div id="inner">
  </div>
</div>
6
Obed Marquez Parlapiano

このスタイルを内側のdivに追加します。

position: relative;
top: 100%;
transform: translateY(-100%);
2
wizzfizz94

あなたのコンテンツが静的な高さでない限り、私が見つけた唯一の方法は、jqueryでそうすることでした：

$(document).ready(function(){
  inner_height = $('#inner-div').height();
  outer_height = $('#outer-div').height();
  margin_calc = (outer_height - inner_height)
  $('#inner-div').css('margin-top', (margin_calc+'px'));
});

これは、別の列の高さが大きい場合、contain-div内のcolumn-divで機能します。

この単純なものはcss-property（つまり、「float：bottom」）を介して「組み込まれている」わけではなく、絶対値などで他のすべてを壊すことはありません。

0
JosephK