Question

这可能吗？我有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/ 感谢。

Answer 1

当然你可以这样做，但div2的位置是相对于div1给出的（因此左边：0可以使它与div1保持对齐）如果你让div2成为div1的子节点。如果您不想将它相对于div1放置，您可以将div2作为div1的兄弟，也可以从div1中删除position: relative;。另一种方法是在div2上使用固定位置。所有这些都有可能不可取的副作用......

有时需要使用javascript来获得您想要的内容。例如，您想要在一个轴上与div1对齐，在另一个轴上与主体对齐。然后可能需要使用脚本。

Answer 2

试试这个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/

Answer 3

你真的不需要CSS3来做到这一点。由于div2位于div1内，因此宽度受div1约束。因此，要使div2宽于div1：

.Div2{
    width:150%; 
}

你也可以这样做：

.Div2{
    left: -25%;
}

调整div2左边缘的开始位置。

见http://jsfiddle.net/jsxvK/。

但是，如果主要目标是让div2采用正文的属性（在您的情况下为page），请考虑将div2的标记放在page中，但不在div内。然后调整div2的顶部位置以在文档中向上或向下移动。

在Centered Div内填充屏幕宽度的Div

3 个答案: