4つのdiv（それらの中の画像）を互いに隣り合わせに折り返すようにする方法

Question

1つのマスターdivで4つのdivの内側を使って4つの画像を隣り合わせに表示しようとしています。 ：左;"それは、私はスクロールバーを取得しています小さな画面上ではなく、働く代わりに、そのことを私はイメージの小さな画面上の新しい行に包まれた（のdivのを）したい...ここ

はその

<div class="first"> 
    <div class="sec"> 
    img 1 
    </div> 
    <div class="sec"> 
    img 2 
    </div> 
    <div class="sec"> 
    img 3 
    </div> 
    <div class="sec"> 
    img 4 
    </div> 
</div> 

のための私の主なコードの例です。

CSS：

.first { 
width: 900px; 
overflow: hidden; 
} 
.sec { 
float:left; 
width:200px; 
display:block; 
} 

私がここで行方不明です何？ （または間違っている）

Answer 1

.first級のために使用max-widthの代わりwidth。

.first { 
    max-width: 900px; 
    overflow: hidden; 
} 

width固定幅を設定し、要素はより広い又はより小さくもすることはできません。したがって、画面が500ピクセルの場合、要素は900ピクセルになります（スクロールバーが表示されます）。一方、要素のサイズを小さくすることができますが、幅を広げることはできません。

max-width

Answer 2

bootstrapを使用できます。

ブートストラップは、応答性の高いモバイルファーストウェブサイトを開発するための最も一般的なHTML、CSS、およびJavaScriptフレームワークです。メディアクエリについて

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-12"> 
 
    <div class="col-md-3"> 
 
    img 1 
 
    </div> 
 
    <div class="col-md-3"> 
 
    img 2 
 
    </div> 
 
    <div class="col-md-3"> 
 
    img 3 
 
    </div> 
 
    <div class="col-md-3"> 
 
    img 4 
 
    </div> 
 
</div>

Answer 3

どのように？

@media (max-width: 768px) { 
    .first { 
     width: 100%; 
    } 
    .sec { 
     float: none; 
     width:100%; 
    } 
}