2017-01-28 8 views
1

Я относительно новичок в веб-разработке, но я пытаюсь создать коробки, чтобы они охватывали мои изображения. Я хочу, чтобы разделить на 6, что-то похожее на это так, что они аккуратно отформатированный:CSS: Как создавать ящики для работы в качестве контейнеров для фотографий

enter image description here

Каждый знает, что это лучший способ приблизиться к этому>? Бутстрап, css? Благодарю.

ответ

1

его очень простой макет, вы можете использовать загрузочный 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>

+0

был без интернета в течение нескольких дней ... так что это простой столбец строк из бутстрапа .. Спасибо! – tadm123