0

我在这里有一个测试站点：

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 }
4

3 回答 3

1

It looks like in your css (style.css) you have this :

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

Just switch absolute by relative and your second row will appear. Is it enough for you?

.project-group{
    width: 100%;
    height: 100%;
    position: relative;
}
于 2013-08-09T16:28:31.390 回答
0

我建议height: 100%从样式表中的.project和.project-group类中删除。我的猜测是，在元素上设置 100% 高度与overflow: hiddenfrom 语句的交互很差#home-projects。

于 2013-08-09T16:26:30.493 回答
0

First of all you have to double the height of #projects and set the height of .project to 50%.

What do you mean by:

Also at the moment when you resize the browser window this makes the icons resize dynamically. I'd like to keep this feature and make both rows of icons fit on the one page such that there is no scroll bar.

于 2013-08-09T16:29:22.830 回答