3

短縮版

水平マージンを設定しないと、私のコードはうまく機能します。これが、私のコードが要素の幅を取得および設定するために .width() を使用する理由ですが、読み取り専用であるため .outerWidth() で同じことを行うことはできません。設定する方法はありますか？

ロングバージョン

さまざまな幅のボタン ( を使用float: left) が多数あり、適切で最適化されたボタン テーブルを作成するために、それらのすべてに単一の幅が必要です。

だから私はこれを書いた：

buttons = $('.button-table > button');
maxWidth = Math.max.apply(
    Math,
    buttons.map(function(){
    return $(this).width();
    }).get()
);
columns = Math.floor($('#container').width()/maxWidth);
buttons.width(100/columns+'%');

このコードは機能しますが、ボタンの水平マージンを設定すると、最後のものが次の行にシフトします。

注: このコードを使用すると、コンテナーの右端にいくつかのピクセルが残っていることがよくあるため、パーセンテージを好みます (別の色を使用してそれらを見ることができます)。

buttons.width(Math.floor($('.button-table').width()/columns));

ノート

これはスタック オーバーフローに関する私の最初の質問です。このプラットフォームを使用して間違いを犯した場合はすみません。

4

2 に答える 2

2

解決策は次のとおりです。

マージンなし: http://jsfiddle.net/x33bD/2/

マージンあり: http://jsfiddle.net/x33bD/7/

class="box"基本的に、このスタイルのボタンの周りにdiv を ( を使用して) 追加しました。

.box {
    float: left;
}
.box button {
    margin-left: auto ;
    margin-right: auto ;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    width: 90%;
    white-space: nowrap;
}

この CSS の方が優れている可能性があります。幅を設定せずにボタンを引き伸ばすことができます。

jQuery コードは同じです (buttonsとなり.box、.width() は .outerWidth() になりました...):

boxes = $('#container > .box');
maxWidth = Math.max.apply(
Math, boxes.map(function() {
    return $(this).outerWidth();
}).get());
columns = Math.floor($('#container').width() / maxWidth);
boxes.width(100 / columns + '%');
于 2012-09-06T19:36:18.130 に答える
0

これを正しく理解していれば。これらのボタンにwidth+を設定します。margin

どうぞ。

すでにご存知かもしれませんが。total width= margin+ border+ padding+content width

したがって、あなたの場合、これを行うことができます。

var buttons = $('.button-table > button'),
// filter out the widest element
    widest  = buttons.sort(function(a, b){ return $(a).outerWidth() - $(b).outerWidth(); }).pop(),
    btn_width   = Math.floor($('.button-table').width()/columns),
    btn_margin  = parseInt($(widest).css('margin-left')) + parseInt($(widest).css('margin-right'));

// set actual width
button.css({
    width: btn_width - btn_margin
})​
于 2012-09-06T16:32:54.960 に答える