HTML/CSS 모자이크 이미지 갤러리

Question

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> 

예를 작동합니다

Answer 1

너비를 시작하는 데 도움이됩니다. 여러 가지 방법으로 그리드/테이블과 같은 구조를 만들 수 있습니다. 그 중 일부는 UL LI (가장 단순함), 플렉스 박스 & 등입니다. 나는 이것이 당신이 시작하는 데 도움이되기를 바랍니다 https://jsfiddle.net/itsselvam/sgmtu6cr/

:

여기 JS 바이올린에서

<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 스타일 UL LI 구조

입니다!