0

コンテナには4つのdiv要素があります。

<div id="container">
    <div id="top"></div>
    <div id="bottom-left"></div>
    <div id="bottom-center"></div>
    <div id="fill"></div>
</div>

私はそれらを次のように配置する必要があります：

要素の上端topは、コンテナの上端にある必要があります。要素は、コンテナのbottom-left左下隅にある必要があります。bottom-center要素は、コンテナの下部の中央に配置する必要があります。要素のfill幅は固定されており、残りのスペースは垂直方向に配置する必要があります。

問題は、fill要素に任意のテキストが含まれ、任意の高さになる可能性があることです。top要素の下に配置し、その下に配置する必要がありbottom-centerます。の下端はbottom-left、の下部と一致している必要がありますbottom-center。

絶対測位を試しましたが、任意のテキスト長では機能しません。

助けていただければ幸いです。

編集：ここにjsfiddleコードがあります：http：//jsfiddle.net/gCg29/それ は私が達成したいレイアウトを作成しますが、テーブルを使用します。

テーブルを取り除き、同じ機能を持つ方法は？ブラウザウィンドウの幅が不十分な場合、要素が重ならないことに注意してください。また、テキストの長さが長くなると、左下とテキストの下の要素がテキストの下部に固定されることに注意してください。

                           +-----------------------+
                           |  top (fixed size)     |
                           +-----------------------+
                    +-----------------------------------+
                    |                                   |
                    |                   fill            |
                    |        (arbitrary height,         |
+-----------------+ |         fixed width)              |
|                 | |                                   |
|  bottom-left    | |                                   |
|  (fixed size)   | |                                   |
|                 | |                                   |
|                 | |                                   |
|                 | |                                   |
|                 | |                                   |
|                 | +-----------------------------------+
|                 |      +--------------------------+
|                 |      |bottom-center (fixed size)|
+-----------------+      +--------------------------+
4

4 に答える 4

1

たくさんのCSSですが、これがあなたの望むものだと思います。ここで起こっていることはかなりあります：

  1. #containerをに設定しposition: relativeて、＃bottom-leftと＃bottom-centerを絶対に配置できるようにします
  2. margin: 0 autoページの中央に配置されるように#topと#fillを指定します
  3. ＃bottom-centerもleft: 50%中央に移動します。次にmargin-left: -width、それを完全に中央に移動します
  4. #containerはpadding-bottom: 75px、＃fillが下部のdivと重ならないようにします

http://jsfiddle.net/34Jpx/2/

div { 
    border: 1px dotted lightgray; 
}
div#container { 
    text-align: center; 
    width: 100%;  
    position: relative;
    padding-bottom: 75px; 
}
div#top { 
    height: 50px; 
    width: 400px; 
    margin: 0 auto; 
    background: lightgreen;  
}
div#fill { 
    height: 200px; 
    width: 500px; 
    margin: 0 auto;  
    background: lightblue; 
    border: 2px solid red; 
}
div#bottom-left {
    position: absolute;
    bottom: 0;
    height: 200px;
    width: 150px;
    background: gray;
    z-index: 99;
}
div#bottom-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -200px;
    width: 400px;
    height: 50px;
    background: lightyellow;
    z-index: 100;
}​
于 2012-11-03T05:43:21.580 に答える
1

私はあなたに恐ろしい考えを持っています。基本的に、ページの重力を反転するように要求しています。したがって：

jQuery('body').css('transform', 'rotate(180deg)');
jQuery(everythingelse).css('-webkit-transform', 'rotate(180deg)');

これにより、ページがめくられ、すべての要素が所定の位置にリフリップされて、反転後も同じ位置で右側が上に表示されます。

もちろん、css3ブラウザーだけでなく、それ以上のものをサポートしたいと思うでしょう。これは恐ろしいほど高価だと思いますが、完全に役立つとは言えないにしても、楽しい答えになると思いました。:)

于 2012-11-03T05:54:57.137 に答える
1

どうぞ：

#container {
    position: relative;
    overflow: hidden;
}

#fill {
    margin: 0 auto 50px; /* 50px = height of bottom-center */
    width: 300px;
}

#top, #bottom-center {
    height: 50px;
    width: 200px;
    margin: 0 auto;
}

#bottom-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -100px; /* - width / 2 */
}

#bottom-left {
    position: absolute;
    left: 0;
    bottom: 0;
}

http://jsfiddle.net/nXqQr/1/

重要な部分は、に収まるようにそのサイズを拡張overflow: hidden;する際のマージンを作るコンテナにあります。#fill#bottom-center

于 2012-11-03T09:04:36.940 に答える
0

左下のみを含む非表示のdiv（inv-div-1と呼びます）と残りのすべてを含む別のdiv（inv-div-2）を作成し、両方にfloat：leftを指定します。ポジショニング。htmlファイルでは、inv-div-1はinv-div-2の前に配置する必要があります。

于 2012-11-03T05:30:47.887 に答える