CSS佈局問題（表像動態調整細胞佈局）

Question

海蘭那裏，

我需要建立一個佈局，看起來是這樣的：

的要求如下：

• 每行有3個單元格
• 左側&右側單元格的寬度未知並且調整爲其內容
• 中間的單元格應該總是佔用剩餘空間，並應根據其中的內容自動調整它的高度
• 左側單元格應始終具有相同的高度，因爲它包含div（row），它又由中間高度給出池（100％的高度）

我已經管理使用此設置實現第一個3分：

• 左格：左浮動
• 右格：浮動權
• 中心格：溢出：隱藏
• 重要提示：右div有被宣佈前的標記中心DIV工作

的問題是，我想不出任何辦法讓左側的單元格總是與行和中央單元格的高度相同。 100％，因爲它的浮動狀態的高度不工作...

示例代碼和working testcase：

HTML：

<div class="outer"> 

    <div class="row"> 
     <div class="inner left">xxxxxxx</div> 
     <div class="inner right">yyyyyyy</div> 
     <div class="inner middle">Lorem ipsum dolor sit</div> 
    </div> 

    <div class="row"> 
     <div class="inner left">xxx</div> 
     <div class="inner right">yyyyyyyyyyy</div> 
     <div class="inner middle">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</div> 
    </div> 

    <div class="row"> 
     <div class="inner left">xxxxxxxxxxxxxxxxxxx</div> 
     <div class="inner right">yyy</div> 
     <div class="inner middle">Lorem ipsum</div> 
    </div> 

</div> 

CSS：

.outer { 
    width: 500px; 
} 

.row { 
    width: 100%; 
    border: 1px solid black; 
} 

.inner { 
    min-height: 24px; 
} 

.inner.left { 
    background-color: yellow; 
    float: left; 
} 

.inner.middle { 
    background-color: red; 
    overflow: hidden; 
} 

.inner.right { 
    background-color: green; 
    float: right; 
} 

我真的感謝任何幫助！

在此先感謝！

Answer 1

你可以使用display:table來關閉一些東西。 http://jsfiddle.net/HV2vh/8/

.outer { 
    width: 500px; 
    margin:1em auto; 
} 
.row { 
    width: 100%; 
    border: 1px solid black; 
    display:table; 
} 
.inner { 
    min-height: 24px; 
    display:table-cell; 
    width:1%; 
} 
.inner.left { 
    background-color: yellow; 
} 
.inner.middle { 
    background-color: red; 
    width:7.5%; 
} 
.inner.right { 
    background-color: green; 
}