Question

我有剩余的X-DIV块浮动。当第一行＆＃34;行没有更多空间时，＃34;它会自动换行到下一行。

这是代码（JS FIDDLE）

jsfiddle.net/pGfeT /

任何人都知道我如何使灰色框之间的空白区域（填充）自动化，所以无论如何灰色框总是相同的大小，只是填充增加或减少？（最小宽度为5像素左右=）

=＆GT; CSS

.photo-dashboard {
width: 100%;
min-height: 800px;
}

.photo-dashboard .photo-block {
padding: 2px;
float: left;
}

.photo-dashboard .photo-block .blockAlpha60 {
width: 330px;
height: 330px;
float: left;
text-align: center;
/* Fallback for web browsers that doesn't support RGBa */
/**/background: rgb(186, 186, 186) transparent;
/* RGBa with 0.6 opacity */
background: rgba(186, 186, 186, 0.1);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

}

.photo-dashboard .photo-block .blockAlpha60 .photo-block-image {
padding-top: 15px;
}

=＆GT; HTML（参见没有角度的工作示例的小提琴）

<div class="photo-dashboard">
        <div ng-repeat="blobThumb in smallPhotos" class="photo-block">
            <div class="blockAlpha60">
                <img ng-src="{{blobThumb}}" class="photo-block-image" />
            </div>
        </div>
    </div>

Answer 1

使用此解决方案，所有块都居中，因此框之间的填充不会改变，但它们覆盖了页面的所有中心

jsfiddle.net/pGfeT/1/

它可能适合您的需要，如果它是用于网站显示，我认为它更常规相对集中你的元素，而不是在屏幕上的任何地方都有相同的填充和元素，特别是对于大屏幕。祝你好运！

DIV块之间的自动填充始终是浏览器窗口的100％？

1 个答案: