web-dev-qa-db-ja.com

フローティングdivを下に垂直に配置する方法は？

例の規則： http://jsfiddle.net/rudiedirkx/wgue7/

上部ではなく下部にバーを配置するにはどうすればよいですか？今、彼らはコンテナの上部に固執しています（#bars）しかし、私はそれらを底に貼り付けてほしい。

ご覧のとおり、一番上のバーの高さがわからないので、コンテナの高さはわかりません。

これらのq + aは役に立ちません： フローティングdivを垂直方向に整列 、 フローティングDIVを垂直方向に整列

簡単なはずですよね？それが役立つ場合：それはまともなブラウザでのみ動作する必要があります。

PS。バーの数は可変であり（例ではありません）、その高さは可変です。幅のみが静的です。コンテナdivには測定値がないため、absoluteを配置しても役に立ちません。

csscss-floatvertical-alignment
48
Rudie

これはトリックを行います ：

#bars {
    display: table-cell;
    border: solid 1px black;
}
#bars > div {
    display: inline-block;
    vertical-align: bottom;
    width: 5px;
    background-color: #999;
    margin-left: 2px;
}
#bars > div:first-child {
    margin-left: 0;
}

親divでdisplay: table-cell;を使用します。デフォルトではvertical-align: baseline;が適用されます。これにより、子divのfloat: left;の必要性が変わり、display: inline-block;を使用できるようになります。これにより、CSSの明確な修正も不要になります。

編集-@thirtydotのコメントごとに、vertical-align: bottom;を子divに追加すると、下部のギャップが削除されます。

したがって、上記のCSSとjsFiddleを変更しました。親divが0のパディングで子divをラップし、素敵でおしゃれに見えるように、display: table-cell;を保持しました！

51
Code Maverick

FLEXBOX！ Flexbox=が最も最適です。

例： http://jsfiddle.net/rudiedirkx/7FGKN/

Flexboxはこれをとてつもなくシンプルにします（忘れないでください（correct）：

#container {
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */
}
#container > div {
  /* margin etc here, but nothing layoutish */
}

CSSの2行：display: flexおよびalign-items: flex-end。

37
Rudie