1

这可能吗？我将 Div2 专门定位在 Div1 内。现在唯一的事情是我希望 Div2 跨越整个屏幕的宽度，而不是仅仅跨越 Div1 的宽度。 

|----------------------------------------------------------|
|                       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 给出的（因此 left:0 会将其与 div1 左对齐）。如果您不想将其相对于 div1 放置，您可以使 div2 成为 div1 的兄弟，也可以position: relative;从 div1 中删除。另一种选择是在 div2 上使用固定位置。所有这些都有可能不受欢迎的副作用......

有时有必要使用 javascript 来获得您想要的。例如，假设您要在一个轴上与 div1 对齐，而在另一轴上与 body 对齐。然后可能需要使用脚本。

于 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/。

但是，如果主要目标是获取div2body 的属性（page在您的情况下），请考虑将标记div2放在 inside page，而不是 inside div。然后调整顶部位置div2以将其在文档中向上或向下移动。

于 2012-11-13T03:02:58.190 回答