Как нам создать сетку изображений, т.е.: Галерея

Question

Как нам создать сетку изображений, т.е.: Галерея

0

Это другой вид галереи.
Вот скрипка 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;
}

user3219918 22 март 2014, в 16:04

Источник

Теги:

html

css

responsive-design

gallery

photos

3 ответа

Ещё вопросы

silk · Answer 1 · 2014-10-28T21-11-00.000Z

Использование float очень полезно, но вы столкнетесь с проблемами при использовании изображений с переменной высотой или при использовании полей, для мощной и удобной для пользователя сетки я рекомендую использовать Isotope или даже лучше использовать плагин, который очень сильно реализует Isotope v2: http://goo.gl/sQ6yXj

user3219918 · Answer 2 · 2014-03-22T14-16-00.000Z

Я нашел ответ сам.
Я изменил высоту изображений влево, вправо и в центр на 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;
}

Dr M J · Answer 3 · 2014-03-22T12-43-00.000Z

Я не понял, чего именно ждут. Но если вы хотите показать шесть изображений, охватывающих всю область браузера, попробуйте внести изменения в HomePortfolioLeft, HomePortfolioright, HomePortfoliocenter

  height:33.33%;

к

  height:100%;

Это не так, но ваш ответ, наконец, привел меня к правильному решению, так что спасибо: D.
Пожалуйста, дайте более подробную информацию о вашем ответе и что вы ожидали. так что другие участники также получат выгоду