CSS：画像のコンテナとして機能するボックスを作成する方法

ウェブ開発に関しては比較的新しいですが、画像を囲むようにボックスを作成しようとしています。それらがきちんとフォーマットされているように私は、それが6に分割するこれに似た何かをしたい：CSS：画像のコンテナとして機能するボックスを作成する方法

誰もがこれにアプローチするための最良の方法です知っていますか>？ブートストラップ、CSS？ありがとう。

出典

2017-01-28 tadm123

その非常にシンプルなレイアウトには、以下のこの

を達成するために、ブートストラップcolumnsを使用することができ、サンプルレイアウト（フルページでこれを見て確認してください）

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    
 
    <div class="text-center"> 
 
    \t <h2>Image Gallery</h2> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <div class="thumbnail"> 
 
     
 
      <img src="http://placehold.it/500x300"> 
 
      <div class="caption"> 
 
      <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p> 
 
      </div> 
 
     
 
     </div> 
 
    </div> 
 
    
 
    <div class="col-md-4"> 
 
     <div class="thumbnail"> 
 
     
 
      <img src="http://placehold.it/500x300"> 
 
      <div class="caption"> 
 
      <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p> 
 
      </div> 
 
     
 
     </div> 
 
    </div> 
 
    
 
    <div class="col-md-4"> 
 
     <div class="thumbnail"> 
 
     
 
      <img src="http://placehold.it/500x300"> 
 
      <div class="caption"> 
 
      <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p> 
 
      </div> 
 
     
 
     </div> 
 
    </div> 
 
    
 
    
 
    
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-01-28 06:30:23 Rahul

はインターネットがなかったですいくつかの日...それはブートストラップから単純な行の列です..ありがとう！ – tadm123

CSS：画像のコンテナとして機能するボックスを作成する方法

答えて

関連する問題