Question

我试图创建一组div，这些div是完全流畅的正方形，可以使用视口调整大小。

这是HTML结构：

<div id="container">
    <div id="row">
        <div class="cell A1">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">MIKEY
                <br/>
                <p>SPINDRIFT KIOSK</p>DIGITAL COLLAGE</div>
        </div>
        <div class="cell A2">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">ERIC
                <br/>
                <p>LIZ & RYAN HEMSWORTH</p>ALBUM DESIGN</div>
        </div>
        <div class="cell A3">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">MIKEY
                <br/>
                <p>EPHEMERA</p>DIGITAL COLLAGE</div>
        </div>
        <div class="cell A4">
            <img class="spacer" src="http://imgur.com/t5M1ryQ">
            <div id="text">ERIC
                <br/>
                <p>REJJIE SNOW</p>SITE DESIGN</div>
        </div>
    </div>

img class =＆＃34; spacer＆＃34;图像是一个空白的方形png，旨在“延伸”＃39;一个div来防止它成为0x0。

这里有一些CSS。我已经包含了一些额外的内容，因为我不确定究竟是什么引起了它...我相信它是：在元素之前。

.A1, .A2, .A3, .A4 {
    position:relative;
}
.A1:before, .A2:before, .A3:before, .A4:before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: -webkit-filter .2s ease-in-out;
    filter: url(filters.svg#grayscale);
    /* Firefox 3.5+ */
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(90%) brightness(30%);
    /* Google Chrome, Safari 6+ & Opera 15+ */
    z-index: -1;
}
.A1:before {
    background-image:url('spindrift.jpg');
    background-size:cover;
}
.A2:before {
    background-image:url('daynnite.jpg');
    background-size:cover;
}
.A3:before {
    background-image:url('');
    background-size:cover;
}
.A4:before {
    background-image:url('');
    background-size:cover;
}
.A1:hover:before, .A2:hover:before, .A3:hover:before, .A4:hover:before {
    -webkit-filter:none;
}
/* text hover */
 div.cell:hover #text {
    opacity:0;
}
#text {
    opacity:1;
    display:table;
    position:absolute;
    z-index:999;
    color:#ffffff;
    text-align:center;
    width:100%;
    top:44%;
    left:0;
    text-decoration:none;
}
p {
    font:16px ProximaNovaBold, sans serif;
    margin:0;
    padding:1 0 1 0;
}
/* table rules */
 #container {
    display:table-row;
    width:100%;
}
#row {
    display:table-row;
    width:100%;
}
.cell {
    position:relative;
    display:table-cell;
    width:700px;
    height:auto;
}
html {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background-color:black;
    color:black;
}
/* image SPACER rules */
 img {
    max-height:600px;
    max-width:100%;
    height:auto;
    width:100%;
    z-index:2;
}

我在这些div的背景图片上使用了一些webkit过滤器，我不希望这些过滤器影响子文本，因此我必须使用：before指示符。这是一个小提琴 http://jsfiddle.net/QC28s/2/

它们现在是空白的（没有背景图像），这不重要。如果您使用开发人员工具并查看div，则间隔符的行为正确，因为它会将每个方块强制为209x209。但是，如果您在HTML上直接看到之前的指示符，您可以看到它（：之前）在正方形的底部放置一个小的6px边距，使它们为209x215。这就是我的问题所在......非常感谢。

Answer 1

说明：

:before元素有position:absolute;，因此无法展开它的父级。问题不在那里。

问题是图像创建的空白。图像是内联元素，它们在它们之后添加了空格（如inline-block元素）。

解决方案：

将display:block;添加到图片代码中，使其不再是内联元素，并且不添加空格。

请参阅 FIDDLE

顺便说一句，你可能会感受到this question

CSS完美的方格略显不完美;从谁知道在哪里的小边际形式

1 个答案: