html + cssテーブルデザイン変更

Question

私のウェブサイトのホームページでは、同じサイズの12枚の写真を3x4グリッドで表示したいと考えています。私はテーブルを避けたいのですが、CSSでは2つのメディアクエリーがあり、レイアウトが3 x 4 x 2 x 1そして12 x 1 x 12の場合は画面が十分大きくはないが、テーブルを使って "レイアウトを変更"するには、私はそれで大丈夫です。私が持っている問題は、私が12でなく11枚の写真を表示しているとき、最後のものが中央にないことです。次のように

第3のdivのコードである（他の図9は、ほとんど同じである）：

.divThumb1{ 
    float: left; 
    width: 31%; 
    max-width: 288px; 
    margin: 0%; 
    position: relative; 
    margin-top: 15px; 
} 
.divThumb2{ 
    margin:0 auto; 
    display:inline-block; 
    width: 31%; 
    max-width: 288px; 
    margin: 0%; 
    position: relative; 
    margin-top: 15px; 
} 
.divThumb3{ 
    float: right; 
    width: 31%; 
    max-width: 288px; 
    margin: 0%; 
    position: relative; 
    margin-top: 15px; 
} 

任意の提案？より多くの情報が必要な場合はお知らせください！あなたは、このような応答性のレイアウトを実現したい場合は

Answer 1

は、ブートストラップという名前の人気のCSSフレームワークで提供されるグリッドレイアウトを使用してに見てみたいことがあります。http://getbootstrap.com/css/#grid-options

あなたのようなものを使用して、ブートストラップが含まれていたら：

<div class="row"> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    ... 
</div> 

は、各divを手動でカスタマイズしなくても目的を達成できるはずです。 .col-xs-,.col-sm-、.col-md-、および.col-lg-にも注意してください。彼らはよく文書化されています。

希望に役立ちます。

Answer 2

ここでは、最大幅の応答性のあるイメージグリッドを示します。すべての画像が中央に配置されます。私はあなたがそれが役に立つと思う！

.imageGrid { 
 
    display: block; 
 
    margin: 0 auto; 
 
    max-width: 800px; 
 
    text-align: center; 
 
    font-size: 0; 
 
    line-height: 0; 
 
} 
 

 
.imageGrid * { 
 
    font-size: 16px; 
 
    line-height: 21px; 
 
} 
 

 
.imageGrid > img { 
 
    display: inline-block; 
 
    width: 31%; 
 
    margin: 1%; 
 
    background-color: gray; 
 
}

<div class="imageGrid"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/> 
 
</div>