2016-09-15 14 views
0

Я пытаюсь сделать пару «блоков» в html и CSS, и я пытаюсь сделать что-то вроде изображения, которое я включил. Пробовал искать шаблон, но я не могу найти ничего подобного, может ли кто-нибудь из вас помочь мне? не (нет необходимости ссылки, которые вы видите на картинке)Галерея изображений мозаики HTML/CSS

Я только несколько из новичка во всем этом, так что простите любые недоразумения

Я сам пробовал это, но я не могу получить эту работать либо, вероятно, потому, что я использую изображения вместо чего-то еще ..

<div class="jumbotron"> 
<center> 
     <!-- FIRST ROW --> 
     <div class="row"> 
      <img src="http://www.cardcarryinglesbian.com/wp-content/uploads/2009/02/AD-SPACE2001.jpg" width="200" height="200" border="0"> 
      <img src="" width="200" height="200" border="0" class="img-circle"> 
      <img src="http://www.cardcarryinglesbian.com/wp-content/uploads/2009/02/AD-SPACE2001.jpg" width="200" height="200" border="0"> 
      <img src="" width="200" height="200" border="0" class="img-circle"> 
      </div> 
      <p></p> 
     <!-- SECOND ROW --> 
      <div class="row"> 
      <img src="" width="200" height="200" border="0" class="img-circle"> 
      <img src="http://www.cardcarryinglesbian.com/wp-content/uploads/2009/02/AD-SPACE2001.jpg" width="200" height="200" border="0"> 
      <img src="" width="200" height="200" border="0" class="img-circle"> 
      <img src="http://www.cardcarryinglesbian.com/wp-content/uploads/2009/02/AD-SPACE2001.jpg" width="200" height="200" border="0"> 
      <p></p> 
      </div> 
</center> 

пример того, что я имею в виду

enter image description here

+0

Вы что-то пробовали? –

+0

Нет, еще что-то застряло здесь –

+0

http://www.bootply.com/ewRImU2EUh посмотрите на данный пример, может быть, поможет вам –

ответ

0

Просто, чтобы помочь вам начать ширину. Вы можете создать сетку/таблицу как структуру несколькими способами, некоторые из них - UL LI (простейший), flex box & и т. Д.

здесь структура UL LI

<div id="container"> 
    <ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
</ul> 
</div> 

стиль SCSS в JS скрипкой: https://jsfiddle.net/itsselvam/sgmtu6cr/

Я надеюсь, что это поможет вам начать!