Question

我需要创建一个单行的3列布局。左列和右列应各自显示一个单词而不截断（它们应展开和收缩以适合单词）。中间列应显示一个可能很长的字符串，截断以适合两列之间。

这里有一些HTML来传达这个想法：

<div class="container">
  <div class="left">Left</div>
  <div class="center">Center center center center center center center</div>
  <div class="right">Right</div>
</div>

还有一些相应的CSS：

.container {
  whitespace: nowrap;
}

.left {
  display: inline-block;
}

.center {
  display: inline-block;
  overflow: hidden;
}

.right {
  display: inline-block;
}

下一步是以某种方式将中心元素设置为自动展开或收缩以填充左右元素之间的空间。

像center.width = container.width - left.width - right.width

有什么想法吗？感谢

编辑：解决了对 ianhirschfeld 的回复的一些小改动。

HTML：

<div class="container">
  <div class="left">Left</div>  
  <div class="right">RightRightRight</div>  
  <div class="center">Center center center center center center center</div>
</div>

CSS：

.container {
  white-space: nowrap;
  overflow: hidden;
}

.left {
  float: left;
}

.center {
  overflow: hidden;
}

.right {
  float: right;
}

Answer 1

根据您的具体实现方式，您可以尝试以下方法：

设置容器类的高度
设置浮动：左侧.left和浮动：右侧.right
将.left和.right div放在中心div之前

.container {
      高度：30px;
  溢出：隐藏;
  }
  .left {
      display：inline-block;
      背景：＃b9ff67;
      float：left;
  }
  .center {
      宽度：100％;
      display：inline-block;
      overfow：hidden;
      背景：＃9ac0ff;
  }
  .right {
      display：inline-block;
      背景：＃ffc8c8;
      float：right;
  }

<div class="container">  
<div class="center">  
    <div class="left">Left</div>  
    <div class="right">RightRightRight</div>  
    Center center center center center center center  
</div>

Answer 2

如果我理解正确，你要找的是这一行：

.center { overflow: hidden; }

这个HTML很好：

<div class="container">
  <div class="left">Left</div>  
  <div class="right">RightRightRight</div>  
  <div class="center">Center center center center center center center</div>
</div>

溢出： alt text http://img638.imageshack.us/img638/755/withoverflow.png

没有溢出： alt text http://img638.imageshack.us/img638/2276/withoutoverflow.png

使用容器和窗口正确调整大小。

Answer 3

尝试搜索“圣杯”布局。这是一种经典的CSS问题。您应该能够使用overflow属性修改现有解决方案以截断文本。这是一个这样的链接：

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

Answer 4

一行三列，调整宽度.........

为什么不将它作为一个包含三个单元格的表而不是使用浮动div，然后给出单元格百分比宽度？

如果你玩百分比，你应该能够合理地接近侧栏的内容......例如1％| 98％| 1％并从那里开始。

如何创建自动扩展块

4 个答案: