1

このタイプのグリッドをhtmlとcssで表示する方法を探しています。

ここに画像の説明を入力してください

背の高いものに合わせて小さい方の柱を伸ばしたいです。これは可能ですか？私はいくつかのjavascriptを使用して解決策を試しましたが、解決策に本当に満足していません。行数が最も多い列が最も高くない場合があるという点で、いくつかの複雑さがあります。また、内容物の量が異なる場合、ボックスの高さが異なる場合があります。

ここで使用するマークアップについては心を開いています。現在、2つのリストを並べて使用していますが、テーブルなどは問題ありません。ただし、rowspanを使用するだけでは、他のボックスよりもはるかに大きい1つのボックスが得られるため、機能しないようです。これは一般的な問題のようですが、そこに良い解決策はありますか？

4

7 に答える 7

1

あなたのフィドルに基づいて：

var heights=[], cnt=0, cols=[];

$('ul').each(function () {
    cols.push(this);
    var h = 0;
    $(this).find('li').each(function() {
        h += $(this).innerHeight();
    });
    heights.push(h);
    cnt++;
});

var max = Math.max.apply(null, heights);

for(var i=0; i<cols.length; i++) {
    var delta = Math.floor((max - heights[i]) / $(cols[i]).find('li').length);
    $(cols[i]).find('li').each(function() {
        $(this).css('height', $(this).innerHeight() + delta);
    });
}
于 2012-11-29T15:34:27.073 に答える
1

ここでJSに固執していると思います。私のアプローチは、リスト内の要素にパーセント高さを使用することです。

  • 各リストの要素数を決定します。
  • 100をその値で割ります（大丈夫、3、6 ...などの場合は注意が必要です）
  • 各要素の高さを％で指定します
  • 親要素に高さを設定することを忘れないでください。そうしないと、％が機能しません。
于 2012-11-29T15:18:30.097 に答える
1

しばらく時間がかかりましたが、ここにフィドルとJSコードがあります。

私のソリューションでは、要素のリレーショナルサイズを考慮し、比例して要素を拡大します。例：スペースの50％を占めていたdivは、ulをストレッチした後も50％を占めます。

（ただし、パディングとボーダーを追加すると問題が発生します。これに対する解決策があれば、私も興味があります！）

JS：

$(function() {
    var $allUl = $('ul');
    setNewPercentages($allUl);

    function getTallestUl($uls) {
        var max = 0;
        var $ulTallest;

        $uls.each(function(i,e) {
            console.log( $(this).height() > max);
            if( $(this).height() > max) {
                $ulTallest = $(this);
                max = $(this).height();
            }
        });

        return $ulTallest;
    };

    function adjustPercentages($ul) {
        $ul.find('li').each( function(i,e) {
            var $this = $(this)
            ,   ulHeight = $ul.height()
            ,   liHeight = $this.height()
            ,   percentage = (liHeight / ulHeight * 100);

            $this.css('height', percentage + '%');
        });
    };

    function setNewPercentages($uls) {
        var $tallest = getTallestUl($allUl).addClass('tallest');
        var heightTallest = $tallest.height();

        $uls.not('.tallest').each(function(i,e) {
            adjustPercentages($(this));
            $(this).css('height', heightTallest);
        });
    };
});​

フィドル

于 2012-11-29T15:21:08.360 に答える
1

これがjQueryソリューションです：http：//jsfiddle.net/hunter/sG39d/

上/下の余白とパディングを追加すると、少し注意が必要になります。li

$(function() {
    var $tallest = null;
    var $ul = $("ul");

    $("ul").each(function() {
        if ($tallest == null || $(this).height() > $tallest.height()) {
            $tallest = $(this);
        }
    });
    var height = $tallest.height();
    $ul.not($tallest).each(function() {
        var update = height / $(this).find("li").length;
        $(this).find("li").css("height", update);
    });
});​
于 2012-11-29T15:24:46.620 に答える
0

残念ながら、アーカイブするのは簡単ではありません...これを試してください： 偽の列

于 2012-11-29T15:12:34.177 に答える
0

これはどう：

<table>
  <tr>
    <td>
      <div>Item1</div>
      <div>Item2</div>
      <div>Item3</div>
    </td>
    <td>
      <div>Item1</div>
      <div>Item2</div>
      <div>Item3</div>
      <div>Item4</div>
      <div>Item5</div>
    </td>
  </tr>
</table>

この方法では、両方の列が同じ高さになります。ただし、短い列の項目は、空白を埋めるために伸びることはありません。Javascriptを使って自分でやらなければならないと思います。

于 2012-11-29T15:20:34.790 に答える
0

これはうまくいくかもしれません

<table border="1" >
<tr>
<td>
<table border="0">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
<td>
<table border="0" cellpadding="5">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
</tr>
</table>
于 2012-12-09T18:23:45.917 に答える