編輯:對不起，伙計們，恐怕我把問題定義錯了，我的錯..我需要這有一個圖像旋轉木馬(黃色)打破了主要的文字部分(紅色)；只在右邊。所以對我來說同樣有效的是這樣的:

小提琴:鏈接

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? */
}

現在主要的問題是將“黃色”的左邊界與文本divs(紅色)的左邊界對齊。

我希望我說得夠清楚了。感謝迄今為止所有的幫助:)抱歉把這個帖子弄得一團糟。

原始帖子 我嘗試讓一個子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 */
}

小提琴在這里: 小提琴

親切的問候， 史蒂文(男子名)

編輯:這是PS的結果:鏈接

在css下面使用。讓我知道它是你正在尋找的那個。

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

}

。黃色{ 位置:絕對； 高度:200px 寬度:400px/* idk這個怎么解決*/ 背景色:# ffff00 top:100px； 右:0px 左:0px /*這適用于div.red，但也應該適用于整個頁面*/ 邊距:自動； }

你需要這個嗎？

.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解決方案。所以，你可以添加一些jQuery或者純JS。

我也有同樣的問題，發現了這個沒有答案的問題——然后我的數學大腦開始工作。

使用vw計算動態右邊距。calc計算出紅色div兩邊的總邊距，將其減半并使其為負。

為了得到寬度，它把上面的計算結果(除了沒有負數)加到它的容器的寬度上。

.red{
    position:relative;
    height:500px;
    width:500px;
    margin:0 auto;
    background-color:#ff0000;
}
.yellow{
    position:absolute;
    height:200px;
    width: calc(100% + ((100vw - 100%) * 0.5));
    background-color:#ffff00;
    top:100px;
    margin-right: calc((100vw - 100%) * -0.5);
}