如何创建图像网格，即:图片库
这是一种不同的画廊。
这里是小提琴 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;
}回答 3
Stack Overflow用户
发布于 2014-03-22 14:59:23
我没有得到你所期望的。但是，如果您想显示覆盖整个浏览器区域的六幅图像，请尝试在HomePortfolioLeft、HomePortfolioright、HomePortfoliocenter中进行更改。
height:33.33%;至
height:100%;Stack Overflow用户
发布于 2014-03-22 15:23:37
我自己找到了答案。
我将图片的左、右和中央的高度改为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;
}Stack Overflow用户
发布于 2014-10-29 00:01:09
使用浮动非常有用，但在使用可变高度图像或使用边距时，对于功能强大、用户友好的网格，我建议您使用同位素，或者更好地使用实现同位素v2的插件：http://goo.gl/sQ6yXj。
https://stackoverflow.com/questions/22579051
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号