12

柔軟な幅が設定されたDIVがあります（例：min-width：800pxおよびmax-width：1400px）。このDIVには、固定幅が200pxでdisplay：inline-blockのボックスが多数あります。したがって、親DIVの幅に応じて、これらのボックスはスペース全体を埋めます。

私の問題は、親divの可変幅によって引き起こされる右側の空白です。この空白スペースは小さくて見栄えがよい場合もありますが、親divの幅が異なると、この空白スペースはほぼ200pxになります。

問題を十分に詳しく説明した場合、この写真が私の実際の状況を説明するのに役立つことを願っています。

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

そして、これが私が欲しいものです：

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

この自動マージンは、TABLEを使用することで簡単に実現できます。ただし、正確な列数はユーザーの画面解像度に依存するため、わかりません。そのため、テーブルを使用することはできず、CSSに固執します。

誰もがこれを解決する方法を知っていますか？コメントと回答をよろしくお願いします。

編集： IE6のサポートは必要ありません。IE7をサポートしたいのですが、制限があることを知っているのでIE7はオプションなので、IE7ではおそらく固定幅の「div.wrapper」を使用します。

EDIT2これらのボックスの複数の行を処理する必要があるため、「 div.wrapper」ボックスを超えず、1つの長い行だけでなく、複数のボックス行で正しく折り返されます。

EDIT3「列」の数は、ユーザーの画面解像度によって大きく異なるため、わかりません。したがって、大画面では1行に7つのボックスがあり、小画面では1行に4つのボックスしかありません。そのため、1行に固定数のボックスを設定しないソリューションが必要です。代わりに、ボックスが1つの行に収まらない場合は、次の行に折り返す必要があります。

4

8 に答える 8

5

これは、IE7互換のCSSが取得できる限り近いものです：http：//jsfiddle.net/thirtydot/79mFr/

それでも正しくない場合は、JavaScriptと、できればjQueryの使用を検討してください。要件を適切に定義すれば、JavaScriptでこれを完璧にするのは簡単なことです。

HTML：

<div id="container">
    <div></div>
    <div></div>
    ..
    <span class="stretch"></span>
</div>

CSS：

#container {
    border: 2px dashed #444;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    min-width: 800px;
    max-width: 1400px
}

#container > div {
    margin-top: 16px;
    border: 1px dashed #f0f;
    width: 200px;
    height: 200px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

余分なspan（.stretch）は。に置き換えることができます:after。

これは、上記のソリューションと同じブラウザで引き続き機能します。:afterIE6 / 7では動作しませんが、distribute-all-linesとにかく使用しているので、問題ありません。

参照： http： //jsfiddle.net/thirtydot/79mFr/2/

Safari:afterで最後の行を完全に機能させるには、HTMLの空白に注意する必要があります。

具体的には、これは機能しません。

<div id="container">
    <div></div>
    <div></div>
</div>

そしてこれはします：

<div id="container">
    <div></div>
    <div></div></div>
于 2011-08-12T15:36:45.967 に答える
1

それらをフロートさせて、ラッパーを適用するだけで、フロートされたラッパーに相対的なものに.boxすることができます。margin:auto;.box

CSS：

div.wrapper {
    width:100%;
    border:3px solid red;
}
div.clear {
    clear:both;
}
div.box-wrapper {
    float:left;
    margin:10px 0;
    height:100px;
    width:20%;
}
div.box {
    border:1px solid black;
    width:80px;
    height:100px;
    margin:auto;
}

HTML：

<div class="wrapper">
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="clear"></div>
</div>

デモ： http： //jsfiddle.net/2avwf/

フィドルウィンドウのために、幅を200pxにしませんでした。width:80pxそれをあなたが望む幅と交換するだけです。

これを動的なソリューションにしたい場合は、画面サイズなどに基づいてユーザーごとに1行のボックスの数が異なるため、幅を定義するボックスラッパークラスを3つまたは4つ作成するだけです。

.box-wrapper-25 {
    width:25%;
}
.box-wrapper-33 {
    width:33%;
}

次に、JQueryを使用すると、ボックスラッパーの幅を簡単に検出し.wrapperてオーバーライドクラスを割り当てることができます。

$('.box-wrapper').each(function(){
    $(this).removeClass().addClass('box-wrapper box-wrapper-25'); // only need 4 per row
});

このようなもの：http：//jsfiddle.net/RcDky/

于 2011-08-12T15:14:42.447 に答える
1

.boxインラインブロックを作成し、のテキストを揃える必要があります.wrapper。.wraper:after最後の行を正当化するために必要です。古いIEは理解しませんafterが、IEtext-align-last:centerでは最後の行を処理します。

.wrapper{
    text-align:justify;
    max-width:1400px;
    min-width:800px;
    text-align-last:center;
}
.wrapper:after{
    content:'';
    display:inline-block;
    width:100%;
    height:0;
    font-size:0;
    line-height:0;
}
.box{
    display:inline-block;
    *display:inline;
    vertical-align:top;
    width:200px;
    height:50px;
    background:red;
}

これが jsfiddleです。

于 2011-08-12T15:33:20.540 に答える
0

このjsFiddleを試してください：http：//jsfiddle.net/MKuxm/

ウィンドウを大きくしたり小さくしたりしてdivのサイズを変更するだけで、赤いボックス間のマージンがそれに応じてサイズ変更されることがわかります。赤いボックスの幅が200ピクセルではなくなったことは承知していますが、パーセンテージ幅と固定ピクセル幅を混在させてはいけないため、純粋なcssでは不可能です。

HTML

<div>
     <span>TEXT</span>
     <span>TEXT</span> 
     <span>TEXT</span> 
     <span>TEXT</span> 
</div>

CSS

div {
    width: 95%;
}

span {
    float: left;
    background: red;
    width: 20%;
    margin-left: 2.5%;
    margin-right: 2.5%;
}
于 2011-08-12T15:02:20.293 に答える
0

私はここで同様の質問に答えました

media queriesこれは、csscalc()ルーチンを使用する純粋なcss3で可能です。

大まかに言うと、これは最新のブラウザでのみ機能します。IE9 +、Chrome、Firefox、

このワーキングデモを見る

基本的な考え方は、＃columnsの状態ごとにメディアクエリを設定することです。次に、calc（）を使用して、各要素（最後の列の要素を除く）の右マージンを計算します。

于 2013-04-30T22:53:27.710 に答える
0

私のプロジェクトでは、同じ問題に直面し、次の決定に至りました-私にとって最善の方法は、jsを使用することです。私の場合、最初の行に十分なスペースがある場合は、コンテナー内のブロックのxxxカウントを取得できます2行目からのブロックは1行目まで続きます。これが例です http://jsfiddle.net/gVAjN/11/

 $(function() {
  // Call function when DOM is ready
  settingsAlignment();

$(window).resize(function() {
      // Call function on window resize
        settingsAlignment();
    })

$('#new_div').click(function() {
    box_number = $('.element').size();
    box_add = box_number + 1;
    $('.container').append($('<div class="element">Box'+ box_add + '</div>'))
    settingsAlignment();
})

function settingsAlignment() {
// calculation of ul's padding-left and li's margin-right
var settingsUl = $('.container');
    settingsLi = $('.element');
    ul_width = settingsUl.outerWidth(true);
    item_width = settingsLi.width();
    min_gap = 7;
    effective_item_width = item_width + min_gap;
    items_in_row = Math.floor((ul_width - min_gap) / effective_item_width);
    gaps_sum = ul_width - items_in_row * item_width;
    new_gaps = gaps_sum / (items_in_row + 1);
    item_margin = Math.floor(new_gaps);
    row_width = (item_width + item_margin) * items_in_row - item_margin;
    console.log(row_width + '= row_width');
    console.log(ul_width + '= ul_width');
    ul_left_padding = Math.ceil((ul_width - row_width) / 2);
    console.log(ul_left_padding + '=ul_left_padding');
    settingsUl.css('padding-left', ul_left_padding + 'px');
    settingsLi.css('margin-right', item_margin + 'px');
  console.log(settingsLi);
 }
});
于 2013-05-18T08:09:32.730 に答える
0

かなり古いですが、複数の行とテキストの整列があるため、試す価値があります。#containerでは、最後の行のdivが少ない場合にギャップが作成されます。私はすべてを左に浮かせたかった。だから私のアイデアは2つのラッパーを使用することでした。

<div class="wrapper">
    <div class="wrapper2">    
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="clear"></div>
    </div>
</div>

オーバーフローだけでなく：非表示。cssで

.wrapper {
    width:620px;
    border:3px solid red;
    margin:0 auto; overflow:hidden;
}
.wrapper2 {
    width:630px;
}
div.clear {
    clear:both;
}
.box {
    width:200px; background:#000; height:100px; margin-bottom:10px; float:left; overflow:hidden; margin-right:10px;
}

欠点：マージンは自動設定されません。

デモ：http：//jsfiddle.net/hexagon13/2avwf/52/

于 2014-12-09T03:57:23.853 に答える
0

これを試して：

div.wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    /* justify-content will give the auto margin you looking for
       it will place the auto margin only between each div.box
       make sure the div.wrapper has "display: flex;"
     */
}

div.box {
    display: inline-flex; /* inline-flex will make the boxes all in the same line */
    width: 200px; /* notice you don't need width to be a % for this to work */
    height: 100%;
    margin: auto; /* gives you the auto margin for the first and last box from the border of your wrapper */
}
于 2017-03-02T01:33:54.647 に答える