1

我想要实现的是所有元素都在同一行，但是text-overflow如果中间的段落比可用空间更宽，则可以启动，但如果不是，那么正确的浮动应该仍然在同一行.

代码笔： 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;
}
4

6 回答 6

2

用一个

float: left

在#middle 上。另外，尝试设置 a width，以避免中间 div 跨越到 100%

于 2013-06-23T09:17:55.147 回答
1

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

否则，在# middle固定错字的情况下，您可以使用float: lefton#middle来制作#right不换行。您还需要使用 JavaScript#middle根据屏幕大小设置宽度，否则您可能会冒文本太长并#right再次下推的风险。使用网格系统更容易实现解决方案！

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

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

于 2013-06-23T09:14:29.207 回答
0

Here is a fiddle. Check it out, it pretty much solves your problem.

Moreover, I would like to suggest you using a grid system as it will help you in making the website in a lot more easier way with very or no little problems!

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;
}

Take a look at this site, provides 10 CSS grid systems! :)

于 2013-06-23T09:32:05.617 回答
0

用于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 */
}
于 2013-06-23T09:22:00.780 回答
0

一种解决方案：

#middle {
   background-color: #999;
   height: 100px;
   float:left;
   width:1364px;
}
于 2013-06-23T09:16:40.843 回答
0

尝试将中间 div 也向左浮动。那应该行得通。

     #middle {
         background-color: #999;
         height: 100px;
         float:left;
            }
于 2013-06-23T09:19:43.930 回答