2

HTML に関する非常にトリッキーな問題があり、CSS ベースの解決策があるかどうかわかりません。基本的に、3列のグリッドがあります。1 番目と 3 番目の列には、可変数の行を含めることができます。2 番目の列には常に 1 つの行があります。各行には最小の高さがあります。

したがって、行数が最も多い列には、高さが最小の高さに設定されたすべての行が含まれます。他の列の行は、残りのスペースを占めるように高さを均等に拡張する必要があります。

列 1 には 3 つの行があり、それぞれの高さが 50px であるとします。列 2 には、高さ 150 ピクセルの行が 1 つ必要です。列 3 に 2 つの行がある場合、それぞれの高さは 75 ピクセルにする必要があります。以下は、私が求めているものをさらに説明するための写真です。

これはCSSでも可能ですか？

ここに画像の説明を入力

4

3 に答える 3

2

ほんの一握りのブラウザーで作業するだけで構わない場合は、純粋な CSS でこれを行うことができます。さあ、孫の div を好きなだけ追加したり削除したりしてください:

http://codepen.io/cimmanon/pen/ldmtJ

/* line 5, ../sass/test.scss */
.wrapper {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
}
@supports (display: flex) and (flex-wrap: wrap) {
  /* line 5, ../sass/test.scss */
  .wrapper {
    display: flex;
  }
}

/* line 9, ../sass/test.scss */
.a, .b, .c {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
@supports (display: flex) and (flex-wrap: wrap) {
  /* line 9, ../sass/test.scss */
  .a, .b, .c {
    display: flex;
  }
}
/* line 13, ../sass/test.scss */
.a div, .b div, .c div {
  border: 1px solid;
  -webkit-flex: 1 0 100%;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
}

/* Fancy it up! */
/* line 21, ../sass/test.scss */
.a {
  background: #ff9999;
  -webkit-flex: 1 1 10em;
  -ms-flex: 1 1 10em;
  flex: 1 1 10em;
}

/* line 26, ../sass/test.scss */
.b {
  background: #00e600;
  -webkit-flex: 1 1 10em;
  -ms-flex: 1 1 10em;
  flex: 1 1 10em;
}

/* line 31, ../sass/test.scss */
.c {
  background: #9999ff;
  -webkit-flex: 1 1 40%;
  -ms-flex: 1 1 40%;
  flex: 1 1 40%;
}

<div class="wrapper">
  <div class="a">
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
  </div>

  <div class="b">
    <div>b</div>
  </div>

  <div class="c">
    <div>c</div>
    <div>c</div>
  </div>
</div>

ブラウザのサポート: Opera、Chrome、IE10。Firefox が flex-wrapを含む現在の Flexbox ドラフトのサポートを最終的に完了すると、そこでも機能します。

于 2013-03-01T18:58:11.823 に答える
0

何人かの人々による推奨に従って、私はこれを成し遂げるためにいくつかの簡単なjavascriptを使用することになりました：

$(document).ready(function() {
   var c1Rows = $(".col1 .row").length;
   var c3Rows = $(".col3 .row").length;

   var minHeight = 50;
   var max = Math.max(c1Rows, c3Rows);
   var totalHeight = max * minHeight;

   $(".col1 .row").css("height", totalHeight / c1Rows);
   $(".col2 .row").css("height", totalHeight);
   $(".col3 .row").css("height", totalHeight / c3Rows);
});
于 2013-03-04T17:37:29.303 に答える
0

あなたは基本的にそれを偽造する必要があります。3 つの列にラッパーがあり、全体に 1 つのラッパーがあることを確認する必要があります。次に、 CSS Faux 列のようなことを行って、2 番目の列を他の 2 列と同じ高さに見せることができます。

于 2013-03-01T18:25:40.893 に答える