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

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

6 个解决方案

#1

Use a

float: left

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

在#middle上。另外,尝试设置宽度,以避免中间div跨越100%

6 个解决方案

#1

更多相关文章

随机推荐