0

彼らは、1枚の写真で数え切れないほどの言葉を説明できると言っているので、ここに私の「詳細」があります：http: //www.imagebanana.com/view/hcqsz5fs/cols.png

私の目標は、画像に示されているように列を作成し、それらを合わせてボディ幅を100％にすることです。

そして私のフィドルはここにあります：http：//jsfiddle.net/c2JH3/（これは私の現在の仕事の単なるモックアップであることに注意してください）。

どうすればこれを達成できますか？

4

3 に答える 3

0

フィドルの使い方がわかりません。しかし、これは私にとってはうまくいきました。背景色と境界線を使用して、違いを適切に表示しました

<!doctype html>
<html>
<head>
    <title>xxx</title>
    <style>
        body{
            margin: 0;
        }
        #wrap {
            width: 100%;
        }
        #left {
            width: 600px;
            float: right;
            border: 1px solid #000000;
        }
        #right {
            width: 350px;
            border: 1px solid #000000;
        }
        #container_left {
            width: 55%;
            float: left;
            background: red;
        }
        #container_right {
            width: 45%;
            float: right;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="wrap">
    <div id="container_left">
        <div id="left">
            <p>Content</p>
        </div>
    </div>
    <div id="container_right">
        <aside id="right">
            <p>Sidebar</p>
        </aside>
    </div>
</div>
</body>

乾杯！

于 2012-07-07T17:30:32.980 に答える
0

クイックノート

あなたのコメントでは、高さが可変であるため、背景画像を使用できないと言っています。

これを修正する方法は、複数の画像を使用し、ページのさまざまな部分で繰り返すかどうかを指示することです。しかし、私があなたの質問に直接答えた後、私はこれを調べます。


短い答え

体の幅を100％にする%には、ルールにパーセンテージ（）を使用する必要がありますwidth。このような：

#left {
  width: 60%;
}

#right {
  width: 40%;
}


いくつかの問題の修正

画面の下部を通過するコンテンツがある場合に必ず発生する問題の1つ。この場合、divs並んでいるように指示する必要があります。

これでうまくいくはずです：

#left {
  position: absolute;
    top: 0;
    left: 0;
  width: 60%;
}

#right {
  position: absolute;
    top: 0;
    right: 0;
  width: 40%;
}


注に戻る

私を信じてください、あなたはあなたの幅にパーセンテージを使いたくないのです。サイズ設定とスケーリングを適切に設計することは非常に困難であり、将来行われる変更は、cssを完全に再設計しないと機能しない可能性があります。

前にも言ったように、複数の画像を使用したいとします。タグに背景画像が表示されます。これはbody、指定したデザインに従って、灰色からオレンジ色にフェードインします。cssは次のようになります。

body {
  background-image: url('path/to/header.jpg') no-repeat;
}


次に、コンテンツなどを保持する、既に持っているようなラッパーdivを作成します。ラッパーの中には次のものがあります。

  • A header（ロゴとナビゲーションバー）。背景がありません（背景が見えるようになりbodyます）。

  • featuredその本当に大きなイメージを真ん中に保持するセクション。負のマージンを使用して中央に配置できます。

  • subnav真ん中のそれらの画像のセクション。これには、背景の一部が一致する独自の背景画像がbody含まれているため、画像と同じように流れ込んでいるように見えます。

  • contentページのすべてのコンテンツを保持するセクション。これにより、画像が垂直方向に繰り返され、連続して見えるようになります。

    #content {
  background-image: url('path/to/slice.jpg') repeat-y;
}

  • ページの湾曲したsubfooter部分（下部にある灰色からオレンジ色の曲線）があるセクション。

  • そして最後に、footer一番下にすべてのものがあるセクション。

内側のページで同じ構造を使用できます。ページの外観を変更するには、異なる画像と間隔を使用するだけです。


総括する

あなたは決してあなた100%のラッピングのための幅を持つ必要はありませんdiv。（一般化すると、これを使用する特定のスタイルがありますが、それらは同じ種類のデザインではありません）。

常に最初に実行する必要があるのは、、、、、およびセクションの画像を作成して、目的の外観を作成することです。bodyheadercontentfooter

次に、ページの中央にとどまるピクセル単位wrapの幅を設定し、余白を増やして背景画像をより多く表示します。

あなたのデザインを楽しんで頑張ってください！

于 2012-07-07T17:47:01.033 に答える
0

回答やアイデアをありがとうございました。彼らは役に立ち、私は何か新しいことを学びました（私の最大の「ありがとう」は本当に素晴らしい、素晴らしい投稿のために@Jonに行きます）。しかし、パーセントでも背景でもこれを解決できないので（私のデザインは提供されたものよりも少し複雑なので）、jQueryを使用しました。要約すると、これが私のモックアップフィドルです。

注：両端が一致することを確認するために、左125をに変更する必要がある場合があります。126

于 2012-07-07T19:05:22.833 に答える