4

これが私がhtmlに持っているものです:

<div class="row" id="row1">
    <div class="box" id="box1"> </div>
    <div class="box" id="box2"> </div>
    <div class="box" id="box3"> </div>
</div>

そして、これが私がそれでやりたいことです： ここに画像の説明を入力

赤い矢印は、幅に関係なくrow1（または3つのボックスでも）すべて同じ長さです

試み

これが私のcssです：

/* 1 row per line */
.row { 
       display: block;
    text-align: center;
}

/* and the box is inline */
.box {
       display: inline-block;
    text-align: justified;
        height: 50px;
        margin: 0 auto;
}

結果：
ここに画像の説明を入力

緑の矢印が同じ長さの場所

それらの幅を一時的に次のように定義しました 

#box1 { width: 50px; }
#box2 { width: 90px; }
#box3 { width: 50px; }

w = 行幅にすると
、間隔は任意の w >= sum( 子ボックスの幅 ) で機能するはずです

しかし、firebug によると、ボックスにはmargin: 0 auto;

私は成功せずにしばらくこれをいじっています。どんな助けでも大歓迎です。

編集

最終的に、<div class="window"></div>各行にさらに任意の数のボックスが含まれる、任意の数の行を含む が作成されます。

各ボックスの幅と高さを定義すると、それに応じて行とウィンドウのサイズが調整されます (これは、ブロック レベルの要素が既定で動作する方法です)。

  • 行の高さは、すべての子ボックスの最大の高さと同じです。
  • ウィンドウの高さは、すべての行の高さの合計です
  • ウィンドウの幅は、すべての子ボックスの幅の合計が最大の行の幅です。

最初の 2 つは自動ですが、3 つ目はすべての行の作業が終わった後に設定できます。これで、行の残りの幅がいっぱいになります ( .row {width: 100%; })。ただし、一部の行には、合計幅がウィンドウの幅よりも小さいボックスが含まれる場合があります。

最終結果は次のようになります
ここに画像の説明を入力 。同じ色の矢印 (間隔) は同じ幅にする必要があります。(図の 2 行目の場合、間隔は単純に 0 です。ウィンドウ (および他のすべての行) の幅は、その幅に一致します)

一般的なアプローチが優先されます。

フィドルの問題に移動

4

4 に答える 4

2

これを行うには、次の css を適用します。

#wI-row1 { 
    width: 600px;
    /* width: 100%; */
    text-align: justify;
    margin: 0 auto;

}
#wI-row1:after{
    content: " ";
    width: 100%;
    display: inline-block;

}

デモ

編集

あなたの編集によると：

すべての div を div でラップする必要があります。

<div class="wrapper">
<div class="row" id="wI-row1">
    <div class="box" id="wI-Level">   </div>
    <div class="box" id="wI-Faction"> </div>
    <div class="box" id="wI-Gender">  </div>
</div>
<div class="row" id="wI-row2">
    <div class="box" id="wI-Level">   </div>
    <div class="box" id="wI-Faction"> </div>
    <div class="box" id="wI-Gender">  </div>
</div>
</div>

したがって、.box で幅を定義したので、#wI-row1、#wI-row2 で幅を設定しないでください。問題ありません。.wrapper の幅を設定するだけです。

コメント応答

作業をテキスト揃えにするには: 幅を 100% に揃える必要があります。display: inline-block;

于 2013-08-14T08:18:09.750 に答える
1

計算が得意な場合 (私とは異なります)。ポジショニングを使用できます。このようなもの：

2.5%要素の間にスペースを空けています。代わりに固定スペースを使用することもできます。また、min-width要素の縮小をさらに制限するためにいくつかを指定します。

働くフィドル

アップデート：

ウィンドウのサイズが変更されると子要素間のギャップが変化するため、動的に計算を行う必要があります。

JavaScript:

function setAlign(parentClass, childCommonClass) {
    var childDivs = document.getElementsByClassName(childCommonClass);
    var childDivsTotalWidth = 0;
    var childDivsLength = childDivs.length;
    var parentElement = document.getElementsByClassName(parentClass)[0];
    var parentElementWidth = parentElement.offsetWidth;
    for (var i = 0; i < childDivsLength; i++) {
        childDivsTotalWidth += childDivs[i].offsetWidth;
    }
    var remainingWidth = parentElementWidth - childDivsTotalWidth;

    var gap = remainingWidth / (childDivsLength + 1);
    var leftWidth = gap;
    for (var j = 0; j < childDivsLength; j++) {
        if (j > 0) {
            leftWidth += gap + childDivs[j - 1].offsetWidth;
        }
        childDivs[j].style.left = leftWidth + "px";
    }
}

window.onload = setAlign('row', 'box');
window.onresize = function () {
    setAlign('row', 'box');
}

更新されたフィドル

于 2013-08-14T08:46:37.217 に答える
1

margin-left(?) を 50px に設定し、行の最後の子を margin-right:50px に設定し、行クラスを text-align:left に変更することで、目標を達成できると思います

display-block の代わりに float を使用する方が良いかもしれません

于 2013-08-14T08:08:37.857 に答える