跨越父母的浮動div寬度

Question

我有一個父div，跨越瀏覽器的寬度，每邊填充。然後我有2個浮動div在這個家長裏面。他們都被設置爲向左浮動。第一個有一個設定的寬度，第二個我想跨越父母剩下的剩餘部分。當我在第二個浮動div上放置背景色時，它只會顯示爲div中文本的寬度。我怎麼才能讓它從第一個浮動divs左移過來。

UPDATE 好的，這裏是一個jsfiddle顯示設置。 JSFIDDLE LINK 即使在縮放瀏覽器時，具有紅色背景的div也應橫跨父項的其餘部分。

Answer 1

既然你希望孩子的第二div元素是父母的全部剩餘寬度，你沒有必要float它。鑑於以下加價：

​<div id="parent"> 
    <div id="one">The first div, fixed width</div> 
    <div id="two">The second, taking up the rest of the space.</div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

和CSS：

​#parent { 
    width: 90%; /* adjust to taste */ 
    padding: 10px; 
    background-color: #ffa; /* just to see where each element is in the document */ 
    overflow: hidden; /* to ensure the parent encloses the floated child div */ 
} 

​#one { 
    float: left; 
    width: 100px; /* whatever width you need */ 
    background-color: red; 
} 
#two { 
    background-color: #f90; 
} 

這似乎給你要找的效果：JS Fiddle demo，雖然只是測試了鉻17在Ubuntu 11.04。

---

響應編輯從OP，評論如下：

當我從第二格或在的jsfiddle例如除去漂浮的礦井.title僞背景填充整個父。不知道我做錯了什麼......

的問題是，float -ed元素被取出文檔的流量，第二div（在你的JS Fiddle.title）擴展「背後」吧。

爲了防止這種情況，你需要無論是從第二個div刪除float（它仍然存在於您發佈的鏈接），也給出了margin-left到.title元素，以防止它走的是全寬：

.title{ 
    padding: 17px 20px 0; 
    background-color: red; 
    height:54px; 
    margin-left: 200px;  
} 

JS Fiddle demo。

如果您無法給出任何理由margin-left，你可以，而是使用在float -ed div（.time）height: 100%;，雖然這是有問題的，由於填充（假定元素的高度被定義爲高度+填充）：

.time{ 
    padding: 17px 20px 0; 
    float:left; 
    margin-right: 20px; 
    height: 100%; 
    background-color: black; 
} 

JS Fiddle demo。

要解決的問題height，在兼容的瀏覽器，你可以使用box-sizing CSS屬性包括在height的padding：

.time{ 
    padding: 17px 20px 0; 
    float:left; 
    margin-right: 20px; 
    height: 100%; 
    background-color: black; 
    box-sizing: border-box; 
} 

JS Fiddle demo。

Answer 2

這是簡單的CSS不可能的。要麼你使用表格佈局不是很整潔 - 或者你做了一個JavaScript修復，這也不是很整潔，但我會說更好的解決方案。

儘管如此：如果它只對bgcolor或類似的東西很重要，你可以做變通辦法。是嗎？

Answer 3

我認爲你可以做的最好的事情是弄清楚剩餘空間是什麼，並將第二個div設置爲那麼寬。既然你說第一個div是一個設定的寬度，沒有任何理由，第二個div也不能是一個設定的寬度。

Answer 4

如果您將左側div設置爲固定寬度並向左浮動，如您所述，那麼您可以將下一個div的邊距設置爲第一個div的邊距，並確保它不是浮動的。例如：

#left_div{ 
float: left; 
width: 180px; 
} 

#right_div 
{ 
margin-left: 200px; 
} 

這應該可以正常工作。

Answer 5

從你的jsfiddle鏈接下你的評論下大衛托馬斯的答案。這是調整後的CSS。

.holder{ 
color:#fff; 
clear:both; 
width: 100%; 
background-color:#2d2f31; 
height: 70px; 
padding-bottom: 1px; 
margin: 12px 0; 
} 

.time{ 
padding: 17px 20px 0; 
float:left; 
margin-right: 20px; 
height: 54px; 
background-color:#2d2f31; 
} 
.title{ 
padding: 17px 20px 0; 
background-color: red; 
height:54px;   
} 
.title span{ 
display:block; 
font-size:12px; 
line-height: 1.25em; 
color:#646464; 
}