css - 要素の中央グリッドの左揃えの最後の行

Question

ブロックを整列するようdisplay:inline-blockに設定されたdiv内に、同じサイズのブロックがたくさん設定されています。text-align:center

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

ブロックは div を水平方向に埋め、ブラウザー ウィンドウが縮小すると、一部のブロックが新しい行に分割され、より多くの行とより少ない列が作成されます。次のように、最後の行を左揃えにして、すべてを中央に配置したままにします。

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|        _____   _____                |
|       |     | |     |               |
|       |  7  | |  8  |               |
|       |_____| |_____|               |
|                                     |

現在起こっていることは次のとおりです。

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|            _____   _____            |
|           |     | |     |           |
|           |  7  | |  8  |           |
|           |_____| |_____|           |
|                                     |

任意の数のブロックが存在する可能性があり、行と列の量はブラウザーの幅によって異なるため、1 つの提案のように追加のフィラー div を追加することはできません。同じ理由で、ブロック #7 を直接スタイリングすることもできません。列の数に関係なく、ブロックは常に中央に配置する必要があります。

これは、よりよく示すためのペンです。

http://codepen.io/anon/pen/IDsxn

これは可能ですか？きっとそうあるべきだと思います。flexbox は ie10+ のみであるため、使用したくありません。ie9+ が必要です。私は純粋な CSS ソリューションを本当に望んでいますが、JS が唯一の方法であると言うなら、それを実際に見てみたいと思います。

参考までに-同様の質問ですが、完全に説明されたものはありません。

複数行のフレックスボックスで最後の行/行を左に揃える方法

CSS - 中央の div で画像の最後の行を左揃えにする

流体コンテナ グリッド内の要素の最後の行の中央揃えを修正し、コンテナが中央に配置されたまま左揃えになるようにしました

複数のインライン ブロックを CSS で中央揃えにし、最後の行を左揃えにします

Answer 1

インラインブロックを表示するソリューション

このアダプティブ グリッドははるかに単純です。マークアップと CSS が少ないため、運用サイトに簡単に実装して、正確なニーズに適応させることができます。

=>> DEMO <<= (結果ウィンドウのサイズを変更して効果を確認します)

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}

<div id="container">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block">8</div>
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
    <div class="block">13</div>
</div>

それには以下が含まれます：

1. 幅 200 ピクセルのブロック用の4 つのメディア クエリと、1000 ピクセルまで拡張可能なコンテナー。グリッド要素の幅とコンテナーの合計幅に応じて、増減する必要がある場合があります

2. インラインブロック要素間の空白を削除します (次のデモでは、font-size 手法を使用しましたが、他の手法を使用することもできます (他の手法については、インラインブロック要素間のスペースを削除する方法を参照してください) 。

3. ブロック間の固定マージン

1 行のブロック数は、コンテナーのサイズに適応します。text-alignプロパティはデフォルト値のままであるためleft、最後の項目が左に配置されます。

---

ブロックとコンテナの両方の間で適応マージンを持つフロート

=>> デモ<<= (結果ウィンドウのサイズを 750px 未満に変更して、動作を確認する必要があります)

html, body {
    margin:0;
    padding:0;
    min-width:150px;
}
.wrap {
    float:left;
    position:relative;
}
.foto {
    width: 150px;
    height: 150px;
    background: gold;
    position:absolute;
}

#warning{display:none;}
@media screen and (min-width: 631px) {
    .wrap {
        width:20%;
        padding-bottom:25%;
    }
    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){
        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-30px;
    }
    .wrap:nth-child(4n+2){
        margin:0 5% 0 7.5%;
    }
    .wrap:nth-child(4n+3){
     margin-right:7.5%;
    }
    .wrap:nth-child(4n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
    .wrap:nth-child(4n+3) .foto{
        right:50%;
        margin-right:-75px;
    }
    .wrap:nth-child(4n) .foto{
        left:-30px;
    }   
    #container{
        margin-top:-45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
    .wrap {
        width:25%;
        padding-bottom:33.3%;
    }
    .wrap:nth-child(3n+2){
        margin:0 12.5%;        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-37px;
    }
     .wrap:nth-child(3n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
     .wrap:nth-child(3n) .foto{
        left:-37px;
    }
    #container{
        margin-top:-37px;
    }
}


@media screen and (min-width: 331px) and (max-width: 480px) {
    .wrap {
        width:33.3%;
        padding-bottom:50%;
        clear:left;
    }
    .wrap:nth-child(even) {
        float:right;
        clear:right;
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-50px;
    }
    .wrap:nth-child(even) .foto {
        left:-50px;
    }
    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
        bottom:-75px;
        margin-bottom:100%;
    }
    #container{
        margin-top:-25px;
    }
}


@media screen and (max-width: 330px) {
    .wrap {
        width:50%;
        padding-bottom:100%;
        clear:left;
    }
    .wrap:nth-child(odd) .foto {
        right:-75px;
        bottom:0;
        bottom:-75px;
        margin-bottom:100%;
    }
    .wrap:nth-child(even) .foto {
        top:0px;
        right:-75px;
        top:-75px;
        margin-top:100%;
    }
}

@media screen and (min-width: 751px) {
    #warning{
        color:#fff;
        display:block;
        position:fixed;
        width:100%;
        height:50%;
        top:25%;
        left:0;
        background:#000;
        text-align:center;
        font-size:30px;
}

<div id="container">
    <div class="wrap"><div class="foto">1</div></div>
    <div class="wrap"><div class="foto">2</div></div>
    <div class="wrap"><div class="foto">3</div></div>
    <div class="wrap"><div class="foto">4</div></div>
    <div class="wrap"><div class="foto">5</div></div>
    <div class="wrap"><div class="foto">6</div></div>
    <div class="wrap"><div class="foto">7</div></div>
    <div class="wrap"><div class="foto">8</div></div>
    <div class="wrap"><div class="foto">9</div></div>
    <div class="wrap"><div class="foto">10</div></div>
    <div class="wrap"><div class="foto">11</div></div>
    <div class="wrap"><div class="foto">12</div></div>
    <div class="wrap"><div class="foto">13</div></div>
    <div class="wrap"><div class="foto">14</div></div>
    <div class="wrap"><div class="foto">15</div></div>
</div>

<!-- FOLLOWING JUST FOR THE DEMO -->
<div id="warning">I haven't written the code for windows bigger than 751px.<br/>
    You must resize this window under 751px.</div>

この手法には次のものが含まれます。

1. 浮きます
2. position:absolute;
3. :nt-child()CSSセレクター
4. メディアクエリ

ブロックをコンテナーの中央に配置し、すべてのブロックとコンテナーの側面の上/左/タイト/下に同じマージンを与えます。このソリューションではフロートを使用するため、最後の行は左に揃えられます。

1 行のブロック数は、ウィンドウの幅に適応します。

Answer 2

シンプルなCSSでこれを試してください：

CSS:

.row{text-align:center;font-size:0;} .block{text-align:center;display:inline-block;width:150px;height:15px;margin:5px; border:1px solid #dddddd;font-size:13px;}

HTML:

<div class="row">
  <div class="block"></div> 
</div>

.row{text-align:center;font-size:0;}
    .block{text-align:center;display:inline-block;width:150px;height:150px;margin:5px; border:1px solid #dddddd;font-size:13px;line-height:150px;}

<div class="row">
      <div class="block">1</div> 
      <div class="block">2</div> 
      <div class="block">3</div> 
      <div class="block">4</div> 
      <div class="block">5</div> 
      <div class="block">6</div> 
      <div class="block">7</div> 
      <div class="block">8</div> 
    </div>

Answer 3

フレックスボックスを使用:

.container {
  display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   flex-wrap:wrap;
}

.block {
  background-color: #ddd;
  border:1px solid #999;
  display: inline-block;
  height: 100px;
  margin: 4px 2px;
  width: 100px;
}

終わり。