我们如何创建图像网格，即：图库答案

【问题标题】：How do we create an image grid, ie: Gallery我们如何创建图像网格，即：图库
【发布时间】：2014-04-30 00:26:08
【问题描述】：

这是一种不同的画廊。
这是一个小提琴http://jsfiddle.net/HVMt9/
当页面加载时，您会看到标题和一个 100% 高度和宽度的大图像。我希望它滚动，图像结束的部分和橙色部分开始的部分，带有文本“投资组合”的部分，我希望它下面的 6 个图像和橙色部分适合页面，100%。这意味着从橙色部分开始到画廊的尽头必须是 100% 高度。
这里的问题是画廊没有 100% 适应屏幕并且被缩短或类似的东西。
我如何使它像这样画廊图像是 100% 高度和宽度。
我用了 HTML

<div class="PortfolioMain">
    <div class="HeadingBar"> <span class="HeadingBarText"> Portfolio </span> 
    </div>
    <div class="Portfolio">
        <img src="1.png" class="HomePortfolioLeft" />
        <img src="2.png" class="HomePortfolioCenter" />
        <img src="3.png" class="HomePortfolioRight" />
        <img src="4.png" class="HomePortfolioLeft" />
        <img src="5.png" class="HomePortfolioCenter" />
        <img src="6.png" class="HomePortfolioRight" />
    </div>
</div>

CSS

.HeadingBar {
    display:table;
    width:100%;
    height:8%;
    background-color:tomato;
}
.HeadingBarText {
    display:table-cell;
    vertical-align:middle;
    padding-left:30px;
    font-size:30px;
    font-family:Helvetica, Arial, sans-serif;
}
.PortfolioMain {
    width:100%;
    height:100%;
}
.Portfolio {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.HomePortfolioLeft {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioCenter {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioRight {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}

【问题讨论】：

标签： html css responsive-design gallery photos

【解决方案1】：

我没有得到您的期望。但是，如果您想显示覆盖整个浏览器区域的六张图片，请尝试在 HomePortfolioLeft、HomePortfolioright、HomePortfoliocenter 中进行更改

  height:33.33%;

到

  height:100%;

【讨论】：

不是这样，但你的回答终于让我找到了正确的解决方案，所以谢谢：D。
请详细说明您的答案和您的期望。所以其他成员也将受益

【解决方案2】：

我自己找到了答案。
我将图像左、右和中心的高度更改为 46%，因为投资组合文本 div 为 8%。
更新小提琴http://jsfiddle.net/HVMt9/1/

CSS

.HeadingBar {
    display:table;
    width:100%;
    height:8%;
    background-color:tomato;
}
.HeadingBarText {
    display:table-cell;
    vertical-align:middle;
    padding-left:30px;
    font-size:30px;
    font-family:Helvetica, Arial, sans-serif;
}
.PortfolioMain {
    width:100%;
    height:100%;
}

.HomePortfolioLeft {
    width:33.33%;
    height:46%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioCenter {
    width:33.33%;
    height:46%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioRight {
    width:33.33%;
    height:46%;
    margin:0;
    padding:0;
    float:left;
}

【讨论】：

【解决方案3】：

使用浮动非常有用，但是在使用可变高度图像或使用边距时会遇到麻烦，对于功能强大且用户友好的网格，我建议您使用 Isotope，甚至更好地使用实现 Isotope v2 的插件很简单：http://goo.gl/sQ6yXj

【讨论】：