Question

这是一种不同的画廊 这是一个小提琴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;
}

Answer 1

我没有得到你期待的东西。但如果您想要显示覆盖整个浏览器区域的六个图像，请尝试在HomePortfolioLeft，HomePortfolioright，HomePortfoliocenter中进行更改

  height:33.33%;

要

  height:100%;

Answer 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;
}

Answer 3

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

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

3 个答案: