Question

我正在开发一个利用public void wallsAndGates(int[][] rooms) { if(rooms==null || rooms.length==0) return; int row=rooms.length; int col=rooms[0].length; Queue<Integer> q=new LinkedList<Integer>(); for(int i=0; i<row; i++){ for(int j=0; j<col; j++){ if(rooms[i][j]==0) { boolean[][] visited=new boolean[row][col]; q.add(i*col+j); bfs(rooms,q,visited); } } } } public void bfs(int[][] rooms, Queue<Integer> q, boolean[][] visited){ int row=rooms.length; int col=rooms[0].length; int distance=1; while(!q.isEmpty()){ int size=q.size(); for(int m=0; m<size; m++){ int num=q.poll(); int i=num/col; int j=num%col; if(j-1>=0 && rooms[i][j-1]!=0 && rooms[i][j-1]!=-1 && !visited[i][j-1]){ rooms[i][j-1]=Math.min(rooms[i][j-1],distance); q.add(i*col+j-1); visited[i][j-1]=true; } if(j+1<rooms[0].length && rooms[i][j+1]!=0 && rooms[i][j+1]!=-1 && !visited[i][j+1]){ rooms[i][j+1]=Math.min(rooms[i][j+1],distance); q.add(i*col+j+1); visited[i][j+1]=true; } if(i-1>=0 && rooms[i-1][j]!=0 && rooms[i-1][j]!=-1 && !visited[i-1][j]){ rooms[i-1][j]=Math.min(rooms[i-1][j],distance); q.add((i-1)*col+j); visited[i-1][j]=true; } if(i+1<rooms.length && rooms[i+1][j]!=0 && rooms[i+1][j]!=-1 && !visited[i+1][j]){ rooms[i+1][j]=Math.min(rooms[i+1][j],distance); q.add((i+1)*col+j); visited[i+1][j]=true; } } distance++; } }创建3x3图片网格（适用于大多数分辨率）的摄影作品集网站。我的div设置如下：

column-count

这是div的css，减去我的页眉和页脚：

<div id="photo-container">
    <div class="photo">
       <img src="photo1.jpg" />
       <div class="caption">Caption1 here</div>
    </div>
    <div class="photo">
       <img src="photo2.jpg" />
       <div class="caption">Caption2 here</div>
    </div>
    ... and so on until photo9
</div>

问题是在最后一排照片后我留下了很大的空白区域。检查Chrome中的元素表明它是#photo-container { position: relative; float: left; width: 100%; clear: left; max-width: 1902px; -webkit-column-rule-width: 0px; -webkit-align-content: left; -webkit-column-count: 3; -webkit-column-gap: 0px; -moz-column-count: 3; -moz-column-gap: 0px; column-count: 3; column-gap: 0px; } .photo { position: relative; float: left; line-height: 0px; /* to get rid of vertical gaps between rows */ } .caption { position: absolute; z-index: 10; bottom: 0; width: 100%; height: 75px; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.2); } div的一部分。这是这样的：

white space in photo-container div

将photo-container添加到overflow:hidden div中可以摆脱空格;但是，中间和右侧列的photo div变为隐藏状态：

white space gone, but some captions hidden

也许我已经对我如何设置我的设计提出了一个严重的缺陷，但是如果可能的话，我希望白色空间消失并显示所有标题。

提前感谢您的帮助。

Answer 1

＆＃34;列＆＃34; css属性不是实现该布局的最佳解决方案。

试试这个：

#photo-container {
    position: relative;
    float: left;
    width: 100%;
    clear: left;
    max-width: 1902px;
}

.photo {
    position: relative;
    float: left;
    width: 33.33%;
}

Answer 2

而不是使用列，为什么不将img设置为宽度的33.333％。

像这样：https://jsfiddle.net/ouhvqo37/1/

.header, .footer{background-color: red; width: 100%; height: 50px; color: white; text-align: center;}
.footer{position: relative; float: left;}
#photo-container {
    width: 100%;    
    max-width: 1902px;
}
.photo {
    position: relative;
    float: left;
    width: 33.3333%;
}
img{width: 100%}
.caption {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 75px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.2);
}

div底部的额外空白区域;溢出：隐藏有帮助，但会导致另一个问题

2 个答案: