cssを使って画像を整列しようとしています

Question

ここまでは私が使用しているコードです。私は6つのイメージを持っています。

アイデアは、この 画像 - 定尺スペースのようなものです - 画像

画像-----空白-----画像

image -blank space - image 

私はページを絞るときに彼らが終わりません互いの上に均一に積み重ねられる。私が持っているものは、お互いの上に6枚の画像があるので、スペースはなくなる必要があります。以下のCSSは、私はブートストラップ、スケルトンとZurb財団のようなフレームワークの数を見て提案し、そのCSSグリッド・コンポーネントを使用するHTML

.row:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 
/** North Scottsdale */ 
 

 
.nsdl { 
 
    float: left; 
 
    margin: 0 175px; 
 
    padding: 0 0px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 3px solid white; 
 
    background-image: url("/images/dphotos/test2a.png"); 
 
} 
 
/** break1 */ 
 

 
.break1 { 
 
    float: left; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 95px; 
 
    height: 200px; 
 
    border: 3px solid white; 
 
} 
 
/** Scottsdale */ 
 

 
.sdl { 
 
    float: left; 
 
    margin: 0px; 
 
    padding: 10px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 3px solid white; 
 
    background-image: url("/images/dphotos/test2a.png"); 
 
} 
 
/** Tempe */ 
 

 
.tmpe { 
 
    float: left; 
 
    margin: 0 35px; 
 
    padding: 10 10px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 3px solid white; 
 
    background-image: url("/images/dphotos/test2a.png"); 
 
} 
 
/** break2 */ 
 

 
.break2 { 
 
    float: left; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    width: 475px; 
 
    height: 200px; 
 
    border: 3px solid white; 
 
} 
 
/** Downtown */ 
 

 
.dtown { 
 
    float: left; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 3px solid white; 
 
    background-image: url("/images/dphotos/test2a.png"); 
 
} 
 
/** West Side */ 
 

 
.wside { 
 
    float: left; 
 
    margin: 0 175px; 
 
    padding: 0 0px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 3px solid white; 
 
    background-image: url("/images/dphotos/test2a.png"); 
 
} 
 
/** break1 */ 
 

 
.break3 { 
 
    float: left; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 95px; 
 
    height: 200px; 
 
    border: 3px solid white; 
 
} 
 
/** UPTOWN */ 
 

 
.utown { 
 
    float: left; 
 
    margin: 0 120px; 
 
    padding: 10 10px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 3px solid white; 
 
    background-image: url("/images/dphotos/test2a.png"); 
 
}

<div class="w3-container"> 
 
    <div class="row"> 
 
    <div class="left"> 
 
     <div class="nsdl" style="text-align: center;"> 
 
     <h2> NORTH SCOTTSDALE</h2> 
 
     </div> 
 
    </div> 
 
    <div class="center"> </div> 
 
    <div class="right"> 
 
     <div class="sdl" style="text-align: center;"> 
 
     <h2>SCOTTSDALE</h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="left"> 
 
     <div class="tmpe" style="text-align: center;"> 
 
     <h2>TEMPE</h2> 
 
     </div> 
 
    </div> 
 
    <div class="center"> </div> 
 
    <div class="right"> 
 
     <div class="dtown" style="text-align: center;"> 
 
     <h2>DOWNTOWN</h2> 
 
     </div> 
 
    </div> 
 
    <div class="left"> 
 
     <div class="wside" style="text-align: center;"> 
 
     <h2>WEST SIDE</h2> 
 
     </div> 
 
    </div> 
 
    <div class="center"> </div> 
 
    <div class="right"> 
 
     <div class="utown" style="text-align: center;"> 
 
     <h2>UPTOWN</h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

が続きます。彼らがモバイルの第1のアプローチを使用してmedia queriesでさまざまなページ領域のサイズをどのように制御するかを調べてください。

あなた自身のソリューションも確かにロールすることができます。ここに例があります。

<div class="img-group"> 
    <div class="img-holder"> 
    <img src="http://placehold.it/300x300?text=1"> 
    </div> 
    <div class="img-holder"> 
    <img src="http://placehold.it/300x300?text=2"> 
    </div> 
    <div class="img-holder"> 
    <img src="http://placehold.it/300x300?text=3"> 
    </div> 
    <div class="img-holder"> 
    <img src="http://placehold.it/300x300?text=4"> 
    </div> 
    <div class="img-holder"> 
    <img src="http://placehold.it/300x300?text=5"> 
    </div> 
    <div class="img-holder"> 
    <img src="http://placehold.it/300x300?text=6"> 
    </div> 
    <div class="img-holder"> 
    <img src="http://placehold.it/300x300?text=7"> 
    </div> 
    <div class="img-holder"> 
    <img src="http://placehold.it/300x300?text=8"> 
    </div> 
    <div class="img-holder"> 
    <img src="http://placehold.it/300x300?text=9"> 
    </div> 
</div> 

.img-group img { 
    display: block; 
    max-width: 100%; 
} 

.img-holder { 
    float: left; 
    width: 50%; 
} 

@media (min-width: 448px) { 
    .img-holder { 
    width: 33.333%; 
    padding: 0.75%; 
    } 
} 

@media (min-width: 779px) { 
    .img-holder { 
    box-sizing: border-box; 
    width: 25%; 
    padding: 2%; 
    } 
} 

デモJSFiddle。

まず、画像を反応させます。これを行う最も簡単な方法は、display: block;とmax-width: 100%;に設定することです。最大幅を設定すると、固有の幅を超えない限り、親要素の幅を占有しようとします。たとえば、親要素が700pxワイドで、画像が600pxワイドの場合は、700pxのスペースに収まるように伸びません。それは600pxで止まります。

media queriesで制御するコンテナ要素にイメージを配置しました。割合の幅（つまり、width: 25%;）を使用すると、すばらしくて流動的になります。

あなたはbox-sizing: border-box;が何をしているのか疑問に思うかもしれません。あなたのwidth定義の一部としてpaddingが含まれているはずです。通常、width: 25%; padding: 1%;の場合、エレメントの幅の合計は27%、1% + 25% + 1% = 27%となります。