如何填充左和右浮动之间的空间，而不做正确的浮动包？ [英] How can I fill the space between a left and right float without making the right float wrap?

问题描述

我想要实现的是所有的元素在同一行，但有 text-overflow 踢，如果中间的段落比可用空间，但如果没有，则正确的浮动应该仍然在同一行。

What I want to achieve is for all the elements to be on the same line, but have the text-overflow kick in if the paragraph in the middle is wider than the available space, but if not, then the right float should still be in the same line.

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

推荐答案

使用

float: left

在#middle一个。此外，请尝试设置 width ，以避免中间div跨度为100％

on the #middle one. Also, try setting a width, to avoid the middle div spanning to 100%

这篇关于如何填充左和右浮动之间的空间，而不做正确的浮动包？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！