讓div填滿中心容器旁邊的空間

我有一個包含帶有內容的居中容器的網頁，我想在旁邊顯示一個徽標。讓div填滿中心容器旁邊的空間

佈局如下：div - container。如果容器居中且容器的區域需要填寫屏幕上留下的寬度。

html, body { 
height: 100%; 
width: 100%; 
} 
#container { 
width: 800px; 
margin-left: auto; 
margin-right: auto; 
min-height: 100%; 
} 

<div id="container"> 

</div> 
<div id="lef"> 
</div>

與此代碼一個的jsfiddle可以用http://jsfiddle.net/7QJQn/

來源

2012-07-08 automaticoo

你不能做到這一點。 – 2012-07-08 15:32:14

你能解釋清楚嗎？ – 2012-07-08 15:33:13

看看我的答案字段中的小提琴。 – 2012-07-08 15:46:57

這是關閉的選項

http://jsfiddle.net/7QJQn/4/

我認爲，做這樣的事情最好的解決辦法只是使用JavaScript/jQuery的。

來源

2012-07-08 15:46:40

我認爲做這樣的事情最好的解決方案就是使用javascript/jQuery。 – 2012-07-08 15:48:11

這個問題的一個問題是，容器需要是一個固定的寬度，這個百分比也許@andrea是正確的，這隻能用JavaScript。 – automaticoo 2012-07-08 16:02:09

添加到您的CSS：

#lef{ 
    float:left 
}

，並更改HTML的div的順序，如：

<div id="lef"></div> 
<div id="container"></div>

來源

2012-07-08 15:29:11 Razvan

它不起作用。 – 2012-07-08 15:31:11

他改變了divs的順序後？ – Razvan 2012-07-08 15:31:56

在http://jsfiddle.net/2KQTb/中嘗試過，但黃色條只會出現在頂部，但仍然會佔用100％的寬度。因爲容器div沒有浮動。 – automaticoo 2012-07-08 15:34:00

首先，你應該把你的標記包裝在一個包裝div所以元素保持緊張。我做了一些改變，一起來看看：

<div id="wrapper"> 

    <div id="lef"> 

    </div> 


    <div id="container"> 

    </div> 

</div>

而CSS：

html, body { 
height: 100%; 
width: 100%; 

} 

#wrapper{ 

width: 360px; 

} 

#container { 
width: 200px; 
margin-left: auto; 
margin-right: auto; 
height: 100px; 
background-color:red; 
} 
#lef { 
background-color:yellow; 
width: 160px;; 
height:100px; 
float: left; 
}

Example

來源

2012-07-08 15:51:50 menislici

這個問題的一個問題是，left是固定的widht，它需要填充100％-200px。 – automaticoo 2012-07-08 16:04:25

如果使用Flexbox將是一個選項，你可以用flex-做到這一點成長財產：

隨着以下標記

<div class="main-row"> 
    <div class="filler"></div> 
    <div class="row-content">Fixed width centered div</div> 
    <div class="filler"></div> 
</div>

您需要在填充div上設置flex-grow：1。看到這個fiddle。

來源

2015-02-16 13:43:21 i4h

根據您希望支持哪些瀏覽器，可以使用calc（）。

基本上，你想50％的視口寬度（50vw）減去#container寬度的一半（所以你從#container的中心測量，你使用所有值的一半） - 我假設你可以將絕對定位#lef添加到視口以保持它的正確性？

CSS（fiddle here）：

#lef { 
    background-color:yellow; 
    width:calc(50vw - 100px); 
    height:20px; 
    position:absolute; 
    right:0; 
    top:0; 
}

來源

2015-02-16 16:20:56 Jayx

讓div填滿中心容器旁邊的空間

回答

相關問題