1

私の質問は、100%他のすべてを中心に保ちながら、バナーをビューポートにする方法です。

現在、既製の@mediaソリューションとグリッド システムを使用するための Skeleton フレームワークを試しています。これは 960 グリッド システムであるため、ビューポートに移動するバナーを内部に配置できないことに気付きました100%( に制限されているため960px)。

Skeleton フレームワークを引き続き使用できるようにするソリューションと、例としてこのサイト100%のようなビューポート バナーを回避できるソリューションが必要です。

これが不可能な場合は、これを実現する最善の方法についてのガイダンスが必要になります。

4

1 に答える 1

0

私があなたの質問を正しく理解していれば、これは通常、バナー内のラッパーで行われます。

例：

HTML:

<div class="banner">
    <div class="wrapper">
        <h1>Example Title</h1>
    </div>
</div>

CSS:

.banner {
    background: url(/* Your image */) center center no-repeat;
    background-size: cover;
    height: /* Whatever height */;
}

.wrapper {
    margin: 0 auto; /* This is what centers it */
    max-width: 1000px;
    width: 96%;
 }

そのため、コンテンツの各セクション (ヘッダー、メイン、フッターなど) 内に個別のラッパーを配置します。

Skeleton で使用するには、次のようになります (ドキュメントを簡単に調べた後)。

HTML:

<div class="banner">
    <div class="container"><!-- Your 960 grid -->
        <div class="six columns><!-- Or however much of your 960 you want it to take up-->
            <!-- Content -->
        </div>
    </div>
</div>
于 2013-04-05T13:52:31.957 に答える