1

私の問題はヘッダーにあります。だから私は基本的に3列のdivを持っています。中央の幅を 980px に固定し、ヘッダーの左側をブラウザー ウィンドウの最後まで拡張し、青色の背景色を使用します。ヘッダーの右側については、ブラウザーの右側の端まで拡張し、背景色を黒にしたいと考えています。それは次のようになります。

-------------------------------【ブルー】【センターヘッダー】【ブラック】--------------------- ------------------->

私は調査を行いましたが、これまでに見つけたのは、左の列が固定され、右の列が残りのスペースを埋めている2つの列だけです。これを私の問題にどのように適用できるのだろうか？

それは次のようになりますか：

<div style="width:100%;">
     <div style="display:table-cell; background-color:blue;"></div>
     <div style="width: 980px;">my header</div>
     <div style="display:table-cell; background-color:black;"></div>
</div>

ありがとうございました！

4

4 に答える 4

4

簡単な解決策 - 基本的に正確な stying を使用しますblockが、中央のtable-cell要素に別のものを配置すると、次のようになりspanます。

<div class="wrapper">
   <div class="left"></div>
   <div class="center"><span>my header</span></div>
   <div class="right"></div>
</div>

すべてのインライン スタイルを別の CSS ブロックに移動し、クラス セレクターを使用しました。

.wrapper {
    display:table;
    width:100%;
}
.left {
    display:table-cell;
    width:50%;
    background-color:blue;
}
.right {
    display:table-cell;
    width:50%;
    background-color:black;
}
.center {
    display:table-cell;
}
.center span {
    display:inline-block;
    width:900px;
}

ここにjsfiddleがあります

そしてここでは、より良いイラストのために中心をより狭くしました: jsfiddle

これが役立つことを願っています=）

于 2013-05-14T14:45:51.130 に答える
1

残念ながら、これを行うための非常にスムーズな方法ではなく、幅広い相互互換性もサポートされています。flex または flexbox と呼ばれる表示用の CSS 仕様があり、美しくエレガントに機能しますが、現時点ではサポートが非常に限られています。ここに、閲覧用のフレックスボックスに関するリソースがいくつかあります...

http://css-tricks.com/old-flexbox-and-new-flexbox/

それまでの間、必要なものを取得する基本的な CSS ジガリー ポケリーを使用して必要なレイアウトを実現できますが、中央の div を絶対的に配置する必要があります。

JSFiddle は次のとおりです: http://jsfiddle.net/CW5dW/

CSSは次のとおりです。

.left {
    width: 50%;
    height: 300px;
    float: left;
    padding-right: 160px;
    box-sizing: border-box;
    background: red;
}

.right {
    width: 50%;
    height: 300px;
    float: right;
    padding-left: 160px;
    box-sizing: border-box;
    background: blue;
}

.middle {
    position: absolute;
    width: 300px;
    height: 300px;
    left: 50%;
    padding: 10px;
    margin-left: -150px;
    box-sizing: border-box;
    background: orange;
}

ここで何が起こっているのですか？

基本的に、div をクラス middle で取得し、ドキュメントのフローから削除します。これにより、左の div を左に、右の div を右に 50% の幅でフロートさせて、ブラウザのすべてのスペースをスムーズに占有できます。

次に、中央の div に 300px (あなたの場合は 980) のスペースを占有するように指示し、左からブラウザの全幅の 50% になるように指示します。ただし、これは div の左端から計算されるため、中央に配置されません。そのため、左端を div の中心に「移動」するために、幅の半分の負のマージン スペースを与えます。

次に、中央の div の幅が 300px (あなたの場合は 980) であることがわかっているので、私の例では、左の div の右端に中央の div の幅の半分以上のパディングが必要であると言えます。それは 150px で、さらに 10px を追加したので、テキストが div の端に直接来ることができなかったので、合計で 160px になりました。右側の div についても同じことを行いますが、それは左側です。これにより、これら 2 つの div のコンテンツが中央の div の下に収まらないように制限されます。

于 2013-05-13T16:08:53.437 に答える
1

この回答は、それ自体は「回答」ではありません。@Michael の投稿への拡張コメントです。ただし、別の回答、jQuery ソリューションを投稿しました。

@Michaelの答え（これは実際には非常にきちんとした解決策です）に関して、高さの宣言を削除すると（OPが間違いなくそうするでしょう）、さまざまな列の背景が露出するという小さな問題があります-この方法はすべてのレベリングの背景に依存していますデザインを一貫させるために、下端に出します。OP のデザインに列の背後に背景がない場合は、このソリューションで問題ありません。背景が必要な場合 (質問の文言から判断している可能性があります)、扱いにくい場合があります。これに対する2つの解決策...

  1. 列の長さについてページをスキャンし、最も長いものを見つけ、すべての短いものを最大に一致させる単純な JavaScript。

  2. もう1つの（そしておそらくより良い）解決策は、すでに列が上にある背景を背景にドロップすることです（高さは1pxだけでよいと思います）-中央の白い帯が幅980pxで、側面の列が最大のブラウザにも対応する数千ピクセル

于 2013-05-13T16:22:34.910 に答える