浮動浮動div內聯100％

Question

是否有可能使div浮動剩餘的第二個100％寬度沒有被推下？舉個例子：http://jsfiddle.net/ErraticFox/p73xa9qm/

正如你所看到的，由於div2是％100，它被壓低到div1以下，所以它可以佔用100％的屏幕。但是有沒有辦法讓div二不被推倒，只取得div div右邊的100％？如果是這樣，怎麼樣？

這裏是我的代碼：

HTML

<div class="one"> 
    <div>About Us</div> 
    <div>Contact Us</div> 
    <div>Advertiser Index</div> 
    <div>Articles</div> 
</div> 
<div class="two"> 
    This is a test This is a test This is a test 
</div> 

CSS

.one { 
    float: left; 
    border-style:solid; 
    border-color:red; 
} 
.two { 
    float: left; 
    border-style:solid; 
    border-color:red; 
    width: 100%; 
} 

Answer 1

你不應懸空你的div，浮動它們將覆蓋它們自動填充剩餘空間的能力。

添加overflow: auto將確保.two犯規溢出到.one

.one { 
    float: left; 
    border: 2px solid blue; 
} 
.two { 
    overflow: auto; 
    border: 2px solid red; 
} 

Answer 2

的問題是，你是浮動的div兩者。 A float將該元素從頁面的正常流程中移除。因此，從第二個div去除float將解決問題的內聯：

.one { 
 
    float: left; 
 
    border-style:solid; 
 
    border-color:red; 
 
} 
 
.two { 
 
    border-style:solid; 
 
    border-color:red; 
 
    width: 100%; 
 
}

<div class="one"> 
 
    <div>About Us</div> 
 
    <div>Contact Us</div> 
 
    <div>Advertiser Index</div> 
 
    <div>Articles</div> 
 
</div> 
 
<div class="two">This is a test This is a test This is a test</div>

但是，一個更好的（更容易）水平填充，你最好使用一些table或flex技術。下面是該display屬性table-cell值的例子，使的div像表格單元格自動填充剩餘空間，但保持在線：

.one { 
 
    display: table-cell; 
 
    white-space: nowrap; 
 
    border-style:solid; 
 
    border-color:red; 
 
} 
 
.two { 
 
    display: table-cell; 
 
    border-style:solid; 
 
    border-color:red; 
 
    width: 100%; 
 
}

<div class="one"> 
 
    <div>About Us</div> 
 
    <div>Contact Us</div> 
 
    <div>Advertiser Index</div> 
 
    <div>Articles</div> 
 
</div> 
 
<div class="two">This is a test This is a test This is a test</div>