1

これは可能ですか？Div2 を Div1 内に特別に配置しました。唯一のことは、Div1 の幅だけではなく、Div2 を画面全体の幅に広げたいということです。 

|----------------------------------------------------------|
|                       Browser                            |
|                                                          |
|                                                          |
|                                                          |
|                                                          |
|           --------------------------------               |
|           |        Div1 (relative)       |               |
|           |                              |               |
|           |                              |               |
|-----------|------------------------------|---------------|
|           |           Div2               |               |
|           |(currently absolute & in Div1)|               |
|-----------|------------------------------|---------------|
|           |                              |               |
|           |                              |               |
|           |                              |               |
|           |                              |               |
|           --------------------------------               |
|                                                          |
|                                                          |
|                                                          |
|----------------------------------------------------------|

これは私が今持っているCSSです：

.page{
      height: 300px;
      width: 400px;}

.Div1{
    float:left; 
      left: 50%;
    height:200px; 
    width:100px;
    position:relative;
        background-color: red;
}

.Div2{
    position:absolute; 
    top:21px; 
    width:100%; 
    height:24px;
        background-color: yellow;
}​

これが私の現在の問題に対する JSFiddle です: http://jsfiddle.net/vBqgT/21/ ありがとう。

4

3 に答える 3

1

確かにそれを行うことができますが、div2 を div1 の子にすると、div2 の位置は div1 に対して相対的に指定されます (したがって、div1 に左揃えで配置する left:0 になります)。div1 に対して相対的に配置したくない場合は、div2 を div1 の兄弟にするか、div1position: relative;から削除することができます。もう 1 つの方法は、div2 で固定位置を使用することです。これらにはすべて、望ましくない副作用があります...

必要なものを正確に取得するには、javascript を使用する必要がある場合があります。たとえば、一方の軸で div1 に、もう一方の軸でボディに合わせたいとします。その場合、スクリプトを使用する必要がある場合があります。

于 2012-11-13T01:35:59.967 に答える
1

この CSS を試してください:

.page{
      height: 300px;
      width: 100%;
    border: 0px solid red;
}

.Div1{
    margin: 0 auto;
    height:200px;
    width:100px;
    background-color: red;
}

.Div2{
    position:absolute;
    top:21px;
    width:100%;
    height:24px;
    background-color: yellow;
    left:0;
}

これがデモです：http://jsfiddle.net/ongisnade/SqG3c/

于 2012-11-13T01:49:16.633 に答える
1

CSS3 でこれを行う必要はありません。div2は の内側にあるためdiv1、幅は によって制限されdiv1ます。したがって、div2より広くするにはdiv1：

.Div2{
    width:150%; 
}

これを行うこともできます：

.Div2{
    left: -25%;
}

の左端のdiv2開始位置を調整します。

http://jsfiddle.net/jsxvK/を参照してください。

ただし、主な目的がdiv2ボディのプロパティを取得することである場合 (pageあなたの場合)、div2insidepageではなくinside のマークアップを配置することを検討してくださいdiv。次に、 の上部の位置を調整div2して、ドキュメント内で上下に移動します。

于 2012-11-13T03:02:58.190 に答える