☰

下から上にdivを積み重ねる 質問する

tag-icon • tag-icon html css scrollbar vertical-alignment alignment
下から上にdivを積み重ねる 質問する

div高さが固定されたに s を追加するとdiv、子 div は上部の境界線に沿って上から下に表示されます。

┌─────────────────────────┐
│ Child Div 1             │
│ Child Div 2             │
│                         │
│                         │
│                         │
└─────────────────────────┘

私は今、次のように下から上に表示しようとしています（下の境界線に沿って）。

┌─────────────────────────┐
│                         │
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
└─────────────────────────┘
┌─────────────────────────┐
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
│ Child Div 3             │
└─────────────────────────┘
┌───────────────────────┬─┐
│ Child Div 2           │▲│
│ Child Div 3           │ │
│ Child Div 4           │ │
│ Child Div 5           │█│
│ Child Div 6           │▼│
└───────────────────────┴─┘

などなど...私の言っている意味が伝われば幸いです。

これは CSS ( のようなものvertical-align: bottom) で簡単に実行できますか? それとも、JavaScript で何かをハックする必要がありますか?

ベストアンサー1

これに対するより現代的な答えは、 を使用することですflexbox。

他の多くの現代的な特徴と同様に、旧ブラウザでは動作しませんしたがって、IE8-9 時代のブラウザのサポートを放棄する準備ができていない限り、別の方法を探す必要があります。

やり方は次のとおりです:

.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.child {
  /* whatever */
}

必要なのはこれだけです。 の詳細についてはflexbox、翻訳。

以下に、基本的なスタイルを適用した例を示します。http://codepen.io/Mest/pen/Gnbfk

おすすめ記事