2

コンテナー内に一連のインライン ブロック div があります。この div で適切な「テーブルのような」グリッドを形成し、要素を左に揃えて配置したいので、グリッドの最後の行に含まれる要素が他の行よりも少ない場合、グリッドは壊れません。

また、グリッド自体をコンテナに対して中央に配置する必要があります。

ここに私が必要とするものの図があります: http://note.io/157hjk1

明らかな方法は、グリッドをラッパー内に配置し、ラッパーに設定text-align: leftし、ラッパー自体を親コンテナー内に配置することです。

ただし、その場合のラッパーの幅は、1 行の要素の長さの合計には収まらず、代わりにコンテナーの幅に収まります。

通常の解決策 -display:inline-blockおそらくラッパー内のインラインブロックが原因で、ラッパーの設定は機能しません。

HTML

<div class="container">
    <div class="wrap">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
        <div class="square">4</div>
        <div class="square">5</div>
        <div class="square">6</div>
        <div class="square">7</div>
    </div>
</div>

CSS

.square {
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 2px;
    display: inline-block;
}

.wrap{
     border: 1px solid green;
}

.container{
    width: 250px;
    border: 1px solid blue;
    padding: 5px;
}

JSFiddle と私のコードはこちらから入手できます - http://jsfiddle.net/prepin/gzB5k/

4

5 に答える 5

0

複数のメディア クエリを使用して、コンテナーの幅を設定します。以下の例を参照してください。

その後、 でコンテナを中央に配置できますmargin: 0 auto。float:left;の代わりに .square 要素にa も設定しdisplay: inline-blockます。 

@media (min-width: 500px) {
  .wrap {
    width: 500px;
  }
}

@media (min-width: 750px) {
  .wrap {
    width: 750px;
  }
}

+ for 1000px, 1250px, 1500px, 1750px

SASS では、次のスニペットを使用できます。

$block-width: 250px;

.wrap {

  width: $block-width;

  @for $i from 1 through 14 {
   @media (min-width : $block-width * $i) {
   width: $block-width * $i;
  }
}
于 2016-03-23T23:43:00.917 に答える
0

私の知る限り、これは JS なしでは実行できません。問題は「ラップ」要素にあります。それ（およびその内容）を中央に配置するために、幅はほとんど100％ではありません。ただし、固定幅を設定すると、要素は流動的ではなくなります。

したがって、基本的には、親の 100% に達しない場合にのみ、「シュリンクラップ」効果を持つ要素を水平float:left方向に中央揃えすることしかできません。display:inline-block2 行目に分割されると、中央に配置されなくなります。

Fiddle のこの例からわかるように、実行できません。

フィドル: http://jsfiddle.net/gzB5k/4/

于 2013-05-26T14:54:17.260 に答える