Question

是否可以使div向左浮动而第二个具有100％宽度而不会被推下？例如：http://jsfiddle.net/ErraticFox/p73xa9qm/

如你所见，由于div 2是％100，它会被推到div 1以下，所以它可以占据屏幕的100％。但是有没有办法让div 2不被推下来，只占用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。 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技术。以下是table-cell属性的display值的示例，它使得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>

Answer 2

你不应该漂浮你的div，浮动它们会覆盖它们自动填充任何剩余空间的能力。

添加overflow: auto将确保.two不会泄漏到.one

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

浮动div内联100％

2 个答案: