Галерея divs с float-left

Question

В моем случае у меня есть всплывающее окно с названием и кнопкой закрытия, которая управляется каким-то скриптом. Я хочу сделать галерею divs с левым поплавком, поэтому, когда размер экрана изменится, они будут укладываться соответственно (например, на очень маленьких экранах они будут идти только под другим), поэтому я считаю, что float - лучший вариант Вот.

Я не уверен, как это сделать, и я хотел бы получить вашу помощь, поскольку я хочу, чтобы это было в центре, покрывающем определенный процент площади (чтобы он мог быть более отзывчивым). Я хотел бы, чтобы вы просто сказали мне, какие шаги я должен предпринять.

Я думал о создании пользовательского класса .gallery set float слева, но я не знаю, как установить все остальное, чтобы работать хорошо.

HTML

<script> document.write('<div class="js">'); </script> 
<nav><ul><li id="buttonc"><a href="#">click</a></li></ul></nav> 

<div class="vidar-bg"> 
    <div id="vidar"> 
<span>my divs<a href="#closevid" id="closevid">&#215;</a></span> 
        </div> 
</div> 
<script> document.write('</div>'); </script> 

CSS

.js .vidar-bg{ 
    position:fixed; 
    left:0;right:0; 
    top:0;bottom:0; 
    z-index:100; 
    background-color:rgba(50,50,50,0.5); 
    display:none;} 

#vidar{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    z-index:101; 
    width:80%px; 
    height:80%px; 
    left:10%;right:10%; 
    top:10%;bottom:10%;} 


#vidar span{ 
    display: block; 
    background:#5DC3A7; 
    padding: 10px; 
    color: #fff !important; 
    background: #f00; 
    z-index:100;} 

    #closevid{ 
    float: right; 
    color: #fff; 
    font-family: serif; 
    font-size: 18px;} 

#closevid:hover{color: #000;} 

Живой код здесь: http://codepen.io/mariomez/pen/OPBVxY

спасибо всем заранее за вашу помощь :)

Answer 1

Этот CSS должен это сделать:

.gallery-item { 
    width: 150px; 
    height: 150px; 
    background-color: #F00; 
    color: #FFF; 
    text-align: center; 
    font-size: 2em; 
    line-height: 150px; 
    margin: 5px; 
    float: left; 
} 

Тогда вам просто нужно добавить следующий HTML на страницу:

<div id="gallery"> 
    <div class="gallery-item">DIV</div> 
</div> 

На самом деле, большинство свойств CSS существуют только, чтобы создать красный квадрат с в белом изображении. Чтобы делать то, что вам нужно, вам просто нужно иметь свойство float: left, как вы сказали сами.