0

コンテナーの幅に応じて、div 要素の幅を適切に設定したいと考えています。ただし、本数が変わりますので、それに合わせて幅を調整する必要があります。状況を明確に説明するCSSDeckリンクは次のとおりです。

http://cssdeck.com/labs/hvmkapkd

ご覧のとおり、両方のコンテナーは同一 (必要) であり、モジュラー コンテンツ (<div>要素) も持っています (これも必要です)。同じ構造を維持したまま、CSS を使用して div の幅を自動調整して、コンテナ全体を埋めることはできますか?

この場合、最初のコンテナの各アイテムの幅は 33.333% になり、2 番目のコンテナの各アイテムの幅は 20% になります。

4

2 に答える 2

1

フレックスボックスの概念にチャンスを与えてください ( https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )

.container{
  height: 100px;
  width: 100px;
  background-color: lightgray;
  margin: 20px;


/* flexbox setup */
  display: -webkit-flex;
  -webkit-flex-direction: row;

  display: flex;
  flex-direction: row;  
}

.container > div {
  height: 100%;

/* flexbox setup */  
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}

( http://cssdeck.com/labs/full/hvmkapkd )

于 2013-11-03T21:15:43.030 に答える
1

質問を投稿した直後に解決策を見つけました。.container要素を設定tableし、色付きのコンテンツを設定しtable-cellます。

リンクは上記で更新されていますが、リンクはここにあります: http://cssdeck.com/labs/hvmkapkd

于 2013-11-03T20:23:59.247 に答える