動態寬度的div和省略號文本

我試圖放置4個格浮動彼此相鄰，其中，所述前兩個因素必須被放置在左側，第四之一應是在右邊，而第三個絕取兩邊之間的距離。因此，div＃1，＃2和＃4具有預定義的寬度，但＃3是動態的。另外，這個動態寬度div有兩個文本行（兩個跨度），我希望他們支持省略號，當頁面大小調整阻止完整閱讀他們的文本。現在，在給定點，當沒有足夠的空間時（由於跨度的文本寬度），div＃4向下移動。這可以完成，如果沒有Javascript？我正在尋找IE9的最低支持。動態寬度的div和省略號文本

這就是我想出了： http://jsfiddle.net/NMrks/aySyu/1/

HTML

<div class="container"> 
    <div class="blockA">A</div> 
    <div class="blockB">B</div> 
    <div class="blockC"> 
     <div class="blockC_container"> 
      <span class="lineA">Text text text from line A</span> 
      <span class="lineB">Text text text text text from line B</span> 
     </div> 
    </div> 
    <div class="blockD"> 
      <span>D</span> 
    </div> 
    <div style="clear:both"></div> 
</div>

CSS

.container { 
height: 60px; 
padding-top: 5px; 
padding-bottom: 5px; 
min-width: 340px; 
} 

.container .blockA { 
width: 54px; 
height: 100%; 
float: left; 
display: block; 
background-color: #ff00ff; 
} 

.container .blockB { 
width: 50px; 
height: 100%; 
float: left; 
display: block; 
background: #df8505; 
} 

.container .blockC { 
height: 100%; 
float: left; 
display: block; 
background: #ff7d7b; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
} 

.container .blockC .lineA { 
line-height: 2.0em; 
display: block; 
font-weight: bold; 
} 

.container .blockC .lineB { 
line-height: 1.0em; 
display: block; 
} 

.container .blockD { 
width: 64px; 
height: 100%; 
float: right; 
display: block; 
background: #df8505; 
}

我試圖與100％的寬度播放，設置根據利潤到其他周圍divs寬度， flexbox等，但我找不出解決這個問題的方法。

在此先感謝

來源

2013-08-05 Deltint

什麼這樣的事情，這解決了兩個問題：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

.container { 
    height: 60px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    min-width: 340px; 
} 

.container .blockA { 
    width: 54px; 
    height: 100%; 
    float: left; 
    display: block; 
    background-color: #ff00ff; 
} 

.container .blockB { 
    width: 50px; 
    height: 100%; 
    float: left; 
    display: block; 
    background: #df8505; 
} 

.container .blockC { 
    height: 100%; 
    display: block; 
    background: #ff7d7b; 
} 

.container .blockC_container p { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.lineA, .lineB {margin: 0;} 

.container .blockC .lineA { 
    line-height: 2.0em; 
    font-weight: bold; 
} 

.container .blockC .lineB { 
    line-height: 1.0em; 
} 

.container .blockD { 
    width: 64px; 
    height: 100%; 
    float: right; 
    display: block; 
    background: #df8505; 
} 

</style> 
</head> 
<body> 

<div class="container"> 
    <div class="blockA">A</div> 
    <div class="blockB">B</div> 

    <div class="blockD"> 
      <span>D</span> 
    </div> 

    <div class="blockC"> 
     <div class="blockC_container"> 
      <p class="lineA">Text text text from line A</p> 
      <p class="lineB">Text text text text text from line B Text text text text text from line BText text text text text from line BText text text text text from line B</p> 
     </div> 
    </div> 

    <div stye="clear:both"></div> 
</div> 

</body> 
</html>

還有其他的方法來獲得第三列佔用所有的空間，但之後將其放置HTML中的其他列並刪除其浮點數是最簡單的。

來源

2013-08-05 01:36:37

是的，這就是我一直在尋找。非常感謝你。 – Deltint

小幅盤整 BLOCKa中，blockC，blockD應該有寬度：汽車，否則其內容將被外面溢出。

更新的樣本長AAA，BBB和CCC細胞：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 
.container { 
    height: 60px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    min-width: 340px; 
} 

.container .blockA { 
    width: auto; 
    height: 100%; 
    float: left; 
    display: block; 
    background-color: #ff00ff; 
} 

.container .blockB { 
    width: auto; 
    height: 100%; 
    float: left; 
    display: block; 
    background: #df8505; 
} 

.container .blockC { 
    height: 100%; 
    display: block; 
    background: #ff7d7b; 
} 

.container .blockC_container p { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.lineA, .lineB {margin: 0;} 

.container .blockC .lineA { 
    line-height: 2.0em; 
    font-weight: bold; 
} 

.container .blockC .lineB { 
    line-height: 1.0em; 
} 

.container .blockD { 
    width: auto; 
    height: 100%; 
    float: right; 
    display: block; 
    background: #df8505; 
} 

</style> 
</head> 
<body> 

<div class="container"> 
    <div class="blockA">AAAAAAAAAAAAAAAAA</div> 
    <div class="blockB">BBBBBBBBBBBBBBBBBB</div> 

    <div class="blockD"> 
      <span>DDDDDDDDDDDD</span> 
    </div> 

    <div class="blockC"> 
     <div class="blockC_container"> 
      <p class="lineA">Text text text from line A</p> 
      <p class="lineB">Text text text text text from line B Text text text text text from line BText text text text text from line BText text text text text from line B</p> 
     </div> 
    </div> 

    <div stye="clear:both"></div> 
</div> 

</body> 
</html>

http://jsfiddle.net/v5Dns/3/

來源

2014-04-04 11:25:09

動態寬度的div和省略號文本

回答

相關問題