0

我怎样才能正确定位“投资组合”部分，使其不会落后于“接触”部分，并且它会根据屏幕的大小（就像照片背景一样）拉伸和收缩？？？只能用 CSS 和 percantages 来完成吗？？？我尝试了许多不同的组合，但没有成功。

每个部分的高度始终为 100%。宽度也是如此。

http://jsfiddle.net/zwwve/9/

<section id="home" class="photobg">
        <div class="inner">
                <div class="copy">
                    <h1>Home</h1>
                    <p>Some text here!</p>
                </div>
        </div>
</section>
4

2 回答 2

1

这是一个粗略的想法：http: //jsfiddle.net/derekstory/zwwve/17/

要取消隐藏投资组合部分，请在其周围放置一个 div。不需要用于换行的 CSS。

对于缩放，您需要删除画廊宽度。也许放一个最小宽度。

.gallery {
    min-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

对于投资组合悬停，您还可以给它们一个百分比和最小宽度。

.project {
    display: inline;
    float: left;
    height: auto;
    position: relative;
    width: 20%;
    min-width: 120px;
    margin-top: 40px;
    margin-left: 40px;
    margin-right: 20px;
}

它的粗略，但基本的想法。

于 2013-06-27T16:03:22.170 回答
0

您为 .gallery 类设置了固定宽度，我将其更改为 100%，现在随着屏幕尺寸的减小，这些项目彼此位于下方。

我还更改了联系人 div 的位置和底部，使其可以位于底部。

JSFIDDLE

添加/更改的 CSS：

.gallery {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#contact{
    position: relative;
    top: 1000px;
}
于 2013-06-27T16:25:12.420 回答