如何創建自動擴展塊

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

這與容器和窗口正確調整大小。