浮动左边的div画廊

Question

在我的情况下，我有一个弹出窗口＆＃34;窗口＆＃34;标题和关闭按钮，由一些脚本控制。我想要做的是将div的画廊放置为左浮动，所以当屏幕调整大小时，它们会相应地叠加（例如，在非常小的屏幕中，它们将在另一个下面只有1），这就是为什么我认为浮动是这里最好的选择。

我不知道该怎么做，我希望得到你的帮助，因为我希望它能够覆盖特定百分比的区域（因此它可以更具响应性）。我想告诉我应该遵循的步骤。

我正在考虑制作一个自定义类.gallery设置浮动到左边，但我不知道如何设置其他一切以便工作得很好。

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属性都只是在您提供的图像中创建带有居中白色文本的红色正方形。要做你想做的事，你只需要像你自己说的那样浮动：左边的属性。