如何在不使用溢出的情況下擴展div來取剩餘寬度：隱藏方法？

Question

<div id="container" style="width:100%;"> 
    <div id="left1" style="float:left; width:100px;">float left</div> 
    <div id="left2" style="float:left; width:100px;">float left</div> 

    <div id="remaining">Remaining width</div> 
</div> 

如何展開最後一個div（#remaining）div取剩餘寬度而不使用overflow：隱藏方法???使用其他方法：&之前：之後???

檢查這一形象..我想酷似第二佈局 http://i.stack.imgur.com/g6DvH.jpg

Answer 1

你需要你的class屬性更改爲style屬性爲內嵌樣式。

而且你也不能有兩個具有相同ID的元素。 Id始終是唯一的。所以，你需要你的第二個div的ID更改爲其他類似（LEFT2）這裏

<div id="container" style="width:100%;"> 
    <div id="left" style="float:left; width:100px; color:white; background:blue;">float left</div> 

    <div id="middle" style="float:left; width:100px; color:white; background:red;">float left</div> 

    <div id="right" style=" color:white; background:green;">Remaining width</div> 
</div> 

工作小提琴......

​​

DEMO fiddle with css

另一個根據您的需要進行工作演示。您需要在right div的左邊添加一些填充（與您在該div左邊的div的寬度完全相同）。

Demo Fiddle with new requirements

Answer 2

您鍵入類，而不是風格。否則，你會感覺良好：

<div style="width:100%;background-color:red;"> 
 
    <div style="float:left; width:100px;background-color:green">float left</div> 
 
    <div style="float:left; width:100px;background-color:blue">float left</div> 
 

 
    <div style="background-color:yellow">Remaining width</div> 
 
</div>

雖然你可能也想看看 「顯示：inline-block的」

Answer 3

你的ID必須是唯一的，用於inline-屬性風格是「風格」。

<div id="container" style="width:100%;"> 
 
    <div id="left" style="float:left; width:100px;">float left</div> 
 
    <div id="middle" style="float:left; width:100px;">float left</div> 
 
    <div id="right">Remaining width</div> 
 
</div>

Answer 4

請檢查不使用overflow屬性此解決方案。

<div style="height: 100px;background: green;float:left;width: 100px;"></div> 
 
<div style="height: 100px;background: red;float:left;width: 100px;"></div> 
 
<div style="height: 100px;background: yellow;width: 100%;"></div>

Answer 5

<div style="width: 100%; position: relative;" id="container"> 
 
    <div id="left" style="float: left; width: 100px; position: absolute; top: 0px; bottom: 0px; background-color: #aaf">float left</div> 
 
    <div style="float: left; width: 100px; position: absolute; bottom: 0px; top: 0px; left: 100px; background-color: #b00;" id="middle">float left</div> 
 
    <div style="margin-left:200px; background-color: #0b0" id="right"> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.y eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos 
 
    et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
 
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
 
    </div> 
 
</div>

你必須內div的位置改變到絕對的。