Question

如何正确定位“投资组合”部分，使其不会落后于“联系”部分，并且根据屏幕的大小拉伸和缩小（就像照片背景一样）???可以用CSS和percantages吗？我尝试了许多不同的组合，但没有成功。

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

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

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

它粗糙，但基本的想法。

Answer 2

你有.gallery类的固定宽度我改为100％，现在随着屏幕尺寸的减小，项目会相互降低。

我还改变了触点div的位置和底部，因此它可以位于底部。

JSFIDDLE

添加/更改了CSS：

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

#contact{
    position: relative;
    top: 1000px;
}

内部高度定位：100％和宽度：100％

2 个答案: