如何创建自动扩展块

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

根据，这里是你可以尝试：

• 设置在容器类
• 浴液的高度：左on .left and float：right on .right
• 将您的.left和.right div放在您的中心div内，然后放入其内容

.container {
height：30px;
溢出：隐藏;
}
.left {
display：inline-block;
背景：＃b9ff67;
float：left;
}
.center {
width：100％;
display：inline-block;
overfow：hidden;
背景：＃9ac0ff;
}
。右侧{
} 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

尝试做的 “圣杯” 布局的搜索。这是一种经典的CSS问题。您应该可以修改现有解决方案以使用overflow属性截断文本。这里有一个这样的环节：你如何准确地执行这一

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

Answer 3

一条线，三列，以调节宽度.........

为什么不能使它具有三个单元格的表，而不是使用浮动divs，然后给细胞百分比宽度？

如果玩弄百分比，您应该能够合理地接近与侧栏匹配的内容......例如1％| 98％| 1％并从那里出发。

Answer 4

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

.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

这与容器和窗口正确调整大小。