0

あなたがウェブサイトを持っていて、画面全体に水平に伸びる派手なピンクのヘッダーを持っているとしましょう。ヘッダーの内側には、中央に配置する必要があり、960pxの固定幅の領域を持つテキストがあります。

---------------------------
|   x   |  hello   |   x   |
|                          |
|   y   |  hi      |   y   |
---------------------------

x=ピンクの背景行y=黄色の背景行

誰かがパディングのために頻繁にコンテナdivの必要性を却下するための最新のcss（jsなし）ソリューションを持っていますか？

html：

<header>
    <div>
        hello
   </div>
</header>
<footer>
    <div>
        hi
   </div>
</footer>

css：

header {
  background: pink;
}
header > div {
  width: 960px;
  margin:0 auto;
}

誰かが解決策を持っていますか、おそらく前後に疑似的なものがありますか？だからあなたはただ美しいhtmlを書くことができます：

<header>hello</header>
<footer>hi</footer>

そしてそれをすべてcssで修正します。

これは基本的な例です。要点は次のとおりです。私はしばしばレイアウトのためだけにdivを使用することになります。ほとんどはパディングです。もちろん、別の背景を設定してトリックを行うこともできますが、おそらく同じ問題と別の背景があるため、これをすべてまとめることについて話します。そして、メインコンテンツなども同様です。

次のようなものがあったらいいのにと思います。

header{
  background: pink;
  padding: 100%-960px;
}

ビューポートのサイズを変更した後、「トリックを実行」してスケーリングします。

4

1 に答える 1

0

通常、私はコンテナクラスで複数のコンテナdivを使用します... hellowとhiのように、両方とも「ラッパークラス」を持つdivにあり、xとyは両方とも100％幅のラッパーのラッパーdivです。

しかし、あなたの目標はラッパーdivを回避することなので、4つのラッパーdivを使用してこれを実現する方法については詳しく説明しません:)

私はあなたがこれらのリンクを調べるべきだと思います：

于 2011-10-01T21:21:26.737 に答える