Question

更新

编辑：对不起伙计们，我担心我把问题定义错了，我的错......我需要这个让图像旋转木马（YELLOW）突破主文本区（RED）;只在右侧。那么对我来说有用的东西是这样的：

小提琴：Link

HTML：

<div class="red">
This would contain the main text
</div>
<div class="yellow">
this div's left border should align with the red divs
<br/>
<br/>
this would be the image carousel
</div>
<div class="red">
this would also contain the main text
</div>

CSS：

.red{
position:relative;
height:100px;
width:500px;
margin:0 auto;
background-color:#ff0000;
}
.yellow{
position:relative;
height:200px;
width:100%; /* idk how to solve this */
background-color:#ffff00;
right:0px;
left:100px; /*how to align this left border to the other red divs? */
}

现在主要的问题是对齐＆＃34;黄色＆＃34;的左边框。使用文本div的左边框（红色）。

我希望我足够清楚。感谢所有的帮助到目前为止:)抱歉让这个帖子搞得一团糟。

原始邮寄

我尝试让子div连接到页面的最右边。此div（黄色）位于父div（红色）内，该div仅填充页面的中心区域。这有可能吗？

这是HTML：

<div class="red">
    <div class="yellow">
        this div should extent to outermost right of entire page
    </div>
</div>

这里是CSS：

.red {
    position:relative;
    height:500px;
    width:500px;
    margin:0 auto;
    background-color:#ff0000;
}
.yellow {
    position:absolute;
    height:200px;
    width:100%; /* idk how to solve this */
    background-color:#ffff00;
    top:100px;
    right:0px; /* this applies to div.red but should apply to the entire page somehow */
}

这里是小提琴： fiddle

亲切的问候，史蒂芬

编辑：点击结果：link

Answer 1

您需要this吗？

.red {
    height: 500px;
    width: 500px;
    margin: 0 auto;
    background-color: #ff0000;
}

.yellow {
    position: absolute;
    height: 200px;
    background-color: #ffff00;
    top: 100px;
    left: auto;
    right: 0px; 
}

UPD：我不确定您是否只能找到CSS解决方案。因此，您可以添加some jQuery或pure JS。

Answer 2

使用以下css。让我知道你正在寻找的那个。

.red{
position:relative;
height:500px;
width:500px;
margin:0 auto;
background-color:#ff0000;

}

.yellow{ position:absolute; height:200px; width:400px; /* idk how to solve this */ background-color:#ffff00; top:100px; right:0px; left:0px; /* this applies to div.red but should apply to the entire page somehow */ margin:auto; }

将子div扩展到整个页面的右边缘

更新

原始邮寄

2 个答案: