浮动浮动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>