0

「ポートフォリオ」セクションを「連絡先」セクションの後ろに移動せず、画面のサイズに応じて伸びたり縮んだりしないようにするにはどうすればよいですか (写真の背景と同じように) ??? CSSとパーカンタージュだけでできますか??? さまざまな組み合わせを試しましたが、成功しませんでした。

各セクションの高さは常に 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 に答える