29

基本的に、子 div を親 div に均等に広げたいのですが、子 div の 1 つが削除された場合、残りのサイズを変更して、残りのスペースを再び均等に埋める必要があります。

元：

 ---parent---------------
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
 ------------------------

子divが削除されると、次のようになります

 ---parent---------------
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
 ------------------------

今、純粋なhtml/cssだけでこれをやりたいのですが、現時点では解決策が見つかりません。

私が検討している他の2つの選択肢は次のとおりです。

  • JavaScriptを使用して高さを計算する
  • 一連のシナリオ (例: 2 つの子 div、3 つの子 div、4 つの子 div を持つ親など) に応じて異なるクラスを作成し、それに応じて php でそれらをロードします。

誰もがより良いアイデアを得ましたか?

4

4 に答える 4

20

css テーブルを使用table-layout: fixed- JavaScript は必要ありません。

フィドル

この動作を確認するには、上記のフィドルの li 要素の 1 つで「要素の検査」をクリックしてから、「ノードの削除」を右クリックしてワラ! -まさにあなたが必要とするもの。

マークアップ

<ul>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
</ul>

CSS

ul
{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #c2c2c2;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

li
{
    text-align: center;
    display: table-row;
    background: pink;
}
span
{
    display: table-cell;
    vertical-align: middle;
    border-top: 1px solid green;
}
于 2013-10-16T06:01:33.273 に答える
4

誰かが CSS3 を使用したいと考えているなら、フレックスボックス レイアウトも良い解決策です!

.parent{
  height:200px;
  width:100%;
  display:flex;
  flex-direction:column;
}
.child{
  width:100%;
  height:100%;
}

更新された JSFiddle リンク

于 2016-10-24T16:12:13.093 に答える
2

display:tableとdisplay:table-rowプロパティを使用しました。

これがフィドルです。

于 2013-10-16T06:12:43.497 に答える