Question

我想要实现的是所有元素都在同一行，但如果中间的段落比可用空间宽，则text-overflow启动，但如果没有，那么右边float应该仍然在同一行。

Codepen：http://codepen.io/anon/pen/hHvCA

HTML：

<div id="outer">
  <div id="left"></div>
  <div id="middle">
    <p>Can this paragraph fill the space between the left and right floats without making the right float wrap?</p>
  </div>
  <div id="right"></div>
</div>

CSS：

#outer {
  background-color: #222;
  height: 100px;
  width: 100%;
}

#left {
  background-color: #555;
  width: 100px;
  height: 100px;
  float: left;
}

#right {
  background-color: #777;
  width: 200px;
  height: 100px;
  float: right;
}

#middle {
   background-color: #999;
   height: 100px;
}

#middle > p {
   line-height: 100px;
   color: #eee;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   font-family: monospace;
}

Answer 1

使用

float: left

<＃>在#middle上。另外，请尝试设置width，以避免中间div跨越100％

Answer 2

正如下面的评论中所讨论的，最好的办法是使用合适的网格系统。 Twitter Bootstrap有两个很棒的选择Default Grid System和Fluid Grid System。此外，您可以从他们的网站打包Bootstrap，只包含您需要的模块。

否则，如果# middle中的拼写错误已修复，您可以在float: left上使用#middle使#right无法换行。您还需要使用JavaScript根据屏幕大小设置#middle上的宽度，否则您可能会因文本过长而再次推迟#right。使用网格系统更容易实现解决方案！

我写了JS来处理window.onload，你也可以做一个调整大小。

修改后的代码：http://codepen.io/anon/pen/xfwJi

Answer 3

一种解决方案：

#middle {
   background-color: #999;
   height: 100px;
   float:left;
   width:1364px;
}

Answer 4

尝试将中间div向左浮动。这应该有用。

     #middle {
         background-color: #999;
         height: 100px;
         float:left;
            }

Answer 5

在float: left;

中使用#middle > p

#middle > p {
 line-height: 100px;
 color: #eee;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;
 font-family: monospace;
 float: left; /* change here */
}

Answer 6

这是fiddle。看看它，它几乎解决了你的问题。

此外，我建议您使用网格系统，因为它可以帮助您以更轻松的方式使网站变得非常或没有问题！

<强> CSS：

#outer {
  background-color: #222;
  height: 100px;
  width: 100%;
}

#left {
  background-color: #555;
  width: 100px;
  height: 100px;
  float: left;
}

#right {
  background-color: #777;
  width: 200px;
  height: 100px;
  float: right;
    margin-top: -100px;
}

#middle {
   background-color: #999;
   height: 100px;
    width: 72%;
    float:left;
}

#middle > p {
   line-height: 100px;
   color: #eee;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   font-family: monospace;
}

看一下this site，提供10个CSS网格系统！：）

如何在不制作正确的浮动包裹的情况下填充左右浮动之间的空间？

6 个答案: