2

HTML/CSS レイアウトの生成に問題があります。これを考える最善の方法は、通常の横方向中央揃えのページ レイアウトを採用することです。中央のレイアウトを超えてブラウザー ウィンドウの右端まで拡張する div が 1 つだけ必要です。

これは、ブラウザ ウィンドウのサイズ変更にスムーズに対応するはずです。 この画像の赤い面は、私が言いたいことを説明しています

4

3 に答える 3

4

これは非常に興味深い課題でした。

数か月前、要素がコンテナからウィンドウの端まで伸びる同様の効果が必要でしたが、コンテンツに使用できるスペースは必要ありませんでした。これは単なるデザイン効果でした。

ティムの答えは堅実ですが、要素の高さを知る必要があるのは実用的ではありません。私のソリューションは、この要件を排除します。

ラッパー、いくつかのパディング、負のマージンを利用して、レイアウトを操作して目的の機能を再現できます。

マークアップ:

<div class="header">
    <h1>Hello World!</h1>
</div>

<div class="content">
    <div class="a">A</div>
    <div class="b">B</div>
</div>

<div class="footer">
    <p>Lorem ipsum dolor sit amet.</p>
</div>​

CSS:

.header,
.footer {
    clear: both;
    margin: auto;
    width: 600px; /* Your container width */
    background: grey;
    }

.content {
    float: right;
    width: 50%;
    padding-left: 300px; /* Half of your container width */
    }

.a {
    float: left;
    margin-left: -300px; /* Half of your container width */
    width: 200px;
    height: 10em;  /* Not required, set for visual */
    background: red;
    }

.b {
    margin-left: -100px; /* The difference between half your container width and element A */
    height: 10em; /* Not required, set for visual */
    background: yellow;
    }

デモ: http://jsfiddle.net/rkW9J/

これはクロスブラウザーで広範囲にテストされていませんが、明らかなレイアウトの癖を実装していないため、うまくいくはずです。

于 2012-10-28T14:12:13.407 に答える
4

このようなレイアウトを実現するための 2 つの CSS のみの方法を次に示します。どちらも IE 7/8/9 と Chrome で簡単にテストされています。

例 1

すべての要素の高さがわかっている例を次に示します。

デモ: http://jsfiddle.net/3RDuy/2/

HTML

<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>

CSS

DIV { position: absolute; height: 100px; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa; }
#left{ width: 100px; left: 50%; top: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; top: 200px; margin-left: -200px; background-color: #aaa; }​

例 2

上と下の高さしか分からない例を次に示します。

デモ: http://jsfiddle.net/3RDuy/3/

HTML

<div id="top">Top</div>
<div id="left">Left</div>
<div id="right">Variable Right</div>
<div id="bottom">Bottom</div>

CSS

DIV { position: absolute; }
#top { width: 400px; left: 50%; margin-left: -200px; background-color: #aaa;  height: 100px; }
#left{ width: 100px; left: 50%; top: 100px; bottom: 100px; margin-left: -200px; background-color: #bbb; }
#right{ left: 50%; right: 0; top: 100px; margin-left: -100px; top: 100px; bottom: 100px; background-color: #aa0000; }
#bottom{ left: 50%; width: 400px; bottom: 0; margin-left: -200px; background-color: #aaa; height: 100px; }​

すべてに可変の高さ (100% を超える高さを持つ機能を含む) が必要な場合は、おそらく JavaScript を使用する必要があります。

于 2012-10-28T11:49:22.577 に答える
3

ソリューション幅の純粋な CSS が見つかりませんが、javascript/jquery で行う方法を次に示します。

デモ

HTML:

<div id="wrapper">
<div id="header"> 1080px </div>
<div id="left"> 400px </div>
<div id="right"> full width </div>
<div id="footer"> 1080px </div>
</div>​

CSS:

#wrapper { width:1080px; margin:0 auto; }
#header, #footer { clear:both; }
#left { float:left; width:400px; margin-right:10px; }

jQuery:

var right = $('#right'),
    left = $('#left');

$(window).on('resize',positionRightDiv);

function positionRightDiv(){
    var posLeft = left.offset().left + left.outerWidth(true),
        posTop = left.offset().top;
    right.css({'position':'absolute','left':posLeft,'top':posTop,'right':0});
}
positionRightDiv();

注: このメソッドを機能させるには、 norを指定しない#wrapperでください </p> position:relative;overlow:hidden;

PS素敵なアトムハートの母親のプロフィール写真;-)

于 2012-10-28T11:19:14.883 に答える