float-left 的 div 画廊

Question

在我的例子中，我有一个带有标题的弹出窗口 "window" 和一个由一些脚本控制的关闭按钮。我想要做的是将 div 画廊与 left-float 一起放置，这样当屏幕调整大小时，它们将相应地堆叠（例如，在非常小的屏幕中，它们将在另一个下只有 1 个）所以这就是为什么我认为浮动是最好的选择在这里。

我不知道该怎么做，我希望得到你的帮助，因为我希望它到达中心，覆盖特定百分比的区域（这样它可以更灵敏）。我希望您能告诉我应该遵循哪些步骤。

我正在考虑制作自定义 class .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 属性只是为了在您提供的图像中创建带有居中白色文本的红色方块。要做你想做的事，你只需要 float: left 属性就像你自己说的那样。

float-left 的 div 画廊

Gallery of divs with float-left

html

javascript

css

gallery

css-float