Как решить проблему позиционирования ДИВА

Question

У меня есть тестовый сайт здесь:

http://www.hugoproject.com/test.html

Я пытаюсь поставить второй ряд книжных иконок под первым, но все, что я стараюсь не Работа. Следующий код делает один значок книги появляется:

<div class="project"> 
<a href="#" class="HS" class="project-link">Arrow<span></span></a> 
</div> 

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

Также в момент изменения размера окна браузера это приводит к изменению размеров значков. Я хотел бы сохранить эту функцию и сделать обе строки значков подходящими на одной странице, чтобы не было полосы прокрутки.

Любые идеи?

HTML

<div id="content"> 
<div id="home-projects-wrapper"> 

<h1 class="home">Hello! My name is Brandon</h1> 

<div id="home-projects"> 
<div id="projects" class="circle"> 
<div class="project-group"> 

<div class="project"> 
<a href="#" class="HS" class="project-link">Arrow<span></span></a> 
</div> 

<div class="project"> 
<a href="#" class="HS" class="project-link">Arrow<span></span></a> 
</div> 
              <div class="project"> 
<a href="#" class="HS" class="project-link">Arrow<span></span></a> 
</div> 

<div class="project"> 
<a href="#" class="HS" class="project-link">Arrow<span></span></a> 
</div> 

</div> 
</div> 
</div> 
</div> 
</div> 

CSS

#container { 
    transition: left .3s; 
    -moz-transition: left .3s; 
    -webkit-transition: left .3s; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    overflow-x: hidden; 
} 
#container.open { 
    left: 270px; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    transition: left .3s; 
    -moz-transition: left .3s; 
    -webkit-transition: left .3s; 
    overflow-x: hidden; 
} 
#content { 
    width: 80%; 
    max-width: 1170px; 
    margin: 7% auto; 
    position: relative; 
    font-size: 14px; 
    line-height: 22px; 
    color: #777777; 
} 
.page-template-page-templateshome-php #content { 
    width: auto; 
    margin: 0 auto; 
    position: static; 
} 
.single-post #content { width: 60% } 
#home-projects { 
    text-align: center; 
    overflow: hidden; 
    position: relative; 
} 
#projects { width: 100% } 
.project-group { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 
.project { 
    float: left; 
    text-align: center; 
    width: 33.3%; 
    height: 100%; 
} 
.project-link { 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-color: #adadad; 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
    width: 80%; 
} 
.circle .project-link, 
.circle .project-link .hover { 
    border-radius: 100%; 
    -moz-border-radius: 100%; 
    -webkit-border-radius: 100%; 
} 
.project-link .hexagon-top { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 0; 
    border-style: solid; 
    border-bottom-color: transparent; 
    border-left-color: #dfdfdf; 
    border-right-color: #dfdfdf; 
    width: 0; 
    height: 0; 
    z-index: 2; 
} 
.project-link .hexagon-bottom { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    border-style: solid; 
    border-top-color: transparent; 
    border-left-color: #dfdfdf; 
    border-right-color: #dfdfdf; 
    width: 0; 
    height: 0; 
    z-index: 2; 
} 
.project-link .hover { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    font-size: 14px; 
    text-align: center; 
    color: #fff; 
    background: #ec6136; 
    text-decoration: none; 
    text-transform: uppercase; 
    display: block; 
    opacity: 0; 
    transition: all .3s; 
    -moz-transition: all .3s; 
    -webkit-transitin: all .3s; 
} 
.project-link .hover-text { 
    display: block; 
    margin-top: 45%; 
} 
.project-link .hover-text:after { 
    content: '>'; 
    font-family: 'icon'; 
    font-size: 12px; 
    margin-left: 15px; 
} 
.project-link:hover > .hover { opacity: .9 } 

Answer 1

Я бы рекомендовал удаление height: 100% из .project и .project-group классов в таблице стилей. Я предполагаю, что установка высоты 100% на элемент плохо взаимодействует с оператором overflow: hidden от #home-projects.

Answer 2

Похоже, в вашем CSS (style.css) у вас есть это:

.project-group{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

Просто включите абсолют относительны и ваша вторая строка будет отображаться. Вам это достаточно?

.project-group{ 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

Answer 3

Прежде всего, вы должны удвоить высоту #projects и установить высоту .project до 50%.

Что вы имеете в виду:

Также на данный момент при изменении размеров окна браузера это делает иконки размер динамически. Я хотел бы сохранить эту функцию и сделать обе строки значков подходящими на одной странице, чтобы не было полосы прокрутки.