容器上的CSS背景

我們假設我得到了一個寬度爲996px的包裝，它在頁面中居中。容器上的CSS背景

.container { 
    margin-left: auto; 
    margin-right: auto; 
    width: 996px; 
}

我現在有一些像header，navi等元素。現在我想創建一個顏色「字段/旗幟」，這是這個包裝30%是右對齊（到這裏沒問題）

.field { 
    background-color: #000; 
    width:30%; 
    height:125px; 
    float:right; 
}

這是我的樣本中工作。（示例寬度調整的寬度：http://jsfiddle.net/8Lvh20qs/）

現在我希望字段的背景一直到桌面（右）結束，但文本只在容器內。我如何解決這個問題？

例如： It should look like this

來源

2015-04-28 Danny.

你將需要爲這個領域這麼一個包裝裏面的包裝和包裝材料一直延伸到桌面容器。否則，如果文本是單行的'.field''width：100％'和'text-aling：right'將解決問題 –

-2

當您使用花車從它包含的元素刪除的項目。嘗試width: 30% margin-left: 70%。

來源

2015-04-28 15:08:21 ironmike

我剛剛寫了一個小樣本。那不是真正的代碼。但那不是問題:) –

@DanP。好吧，我仍然不是100％確定你的意思，但這是我想出的。 http://codepen.io/mike-grifin/pen/waBQZM – ironmike

我建議增加另一個容器position: absolute;也請注意添加的屬性position: relative到.container否則position: absolute這個容器內將無法工作

// EDITED

現在應該看起來像你的形象。注意：您需要以變換爲前綴：翻譯我爲其他瀏覽器添加的屬性不是Chrome。它將其自身高度的-50％翻轉 - 這導致容器始終位於容器內部的中心。

.container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 316px; 
 
    border: 1px solid black; 
 
    height: 600px; 
 
    position: relative; 
 
} 
 
.field { 
 
    background-color: #000; 
 
    color:#fff; 
 
    width:30%; 
 
    height:50px; 
 
    padding-right: 100%; 
 
    box-sizing: content-box; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    left: 70%; 
 
    
 
} 
 
.placeholder { 
 
    height:300px; 
 
    width:100%; 
 
    float:left; 
 
}

<div class="container"> 
 
    <div class="placeholder"></div> 
 
    <div class="field">text inside container</div> 
 
</div>

來源

2015-04-28 15:17:00

我可能會誤會，但我認爲OP希望將含有黑色的元素擴展到容器外部以便到達桌面邊緣 – wahwahwah

非常感謝。我在我的問題中添加了一個示例圖片。對不起，如果它不明確描述 –

啊好的xD你想要它垂直適合，直到屏幕結束xD編輯小提琴 –

注意這個答案被張貼之前最新OP編輯，它解決了以下

enter image description here

圖像顯示的問題，您將需要一個包裝爲這個如此字段是內部包裝器，並且包裝器一直延伸到桌面容器。否則，如果文本是單線有.fieldwidth:100%和text-align:right;將解決問題。

這是jsfiddle example（帶包裝）

CSS：

.container { 
    margin-left: auto; 
    margin-right: auto; 
    width: 316px; 
    border: 1px solid black; 
    height: 600px; 
} 
.wrapper{ 
    position:relative; 
    width: 100%; 
    background-color: #000; 
    height:50px; 
    float:left; 
} 

.field { 
    position:relative; 
    background-color: inherit; 
    color:#fff; 
    width:30%; 
    height:100%; 
    float:right; 
} 
.placeholder { 
    height:300px; 
    width:100%; 
    float:left; 
}

HTML：

<div class="container"> 
    <div class="placeholder"></div> 
    <div class="wrapper"> 
    <div class="field">text inside container</div> 
    </div> 
</div>

來源

2015-04-28 15:19:49

如果你想該字段的背景去，直到容器結束您必須將.field和overflow:hidden設爲100％的高度設置爲.container（因此div不會從conta中出來核能研究所）。

.container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 316px; 
 
    border: 1px solid black; 
 
    height: 600px; 
 
    overflow:hidden; 
 
} 
 
.field { 
 
    background-color: #000; 
 
    color:#fff; 
 
    width:30%; 
 
    height:100%; 
 
    float:right; 
 
} 
 
.placeholder { 
 
    height:300px; 
 
    width:100%; 
 
    float:left; 
 
}

<div class="container"> 
 
    <div class="placeholder"></div> 
 
    <div class="field">text inside container</div> 
 
</div>

來源

2015-04-28 15:32:24

容器上的CSS背景

回答

相關問題