如何組織這種佈局溢出？

我想要的佈局： image here

我想要的標題總是出現在充分和正確的。字幕應該出現在左側，但任何隱藏的溢出，所以標題的長度總是先例。

我有以下代碼：

<html> 
<head> 
    <style type="text/css"> 
     .title {height: 25px; text-align:left; width: 300px; border:1px solid red;} 
     .subtitle {height: 20px; overflow:hidden; float:left; border: 1px solid blue;} 
    </style> 
</head> 

<body> 
    <div class="title"> 
     Title number 1 
     <div class="subtitle">This is subtitle that is longer with even more text</div> 
    </div> 
</body> 
</html>

在分鐘，如果字幕太長，它只是徘徊下方。任何想法？

來源

2011-12-06 penpen

我認爲它會更有意義，對正確的左側的標題和副標題。 – thirtydot

謝謝，但我用「title」和「subtitle」替換了我的真實數據。你說得對，不好的例子！ – penpen

這是使用text-overflow: ellipsis的好時機。

http://jsfiddle.net/thirtydot/sxeu9/

HTML：

<div class="row"> 
    <div class="title">Title number 1</div> 
    <div class="subtitle">This is subtitle that is longer with even more text</div> 
</div>

CSS：

.row { 
    width: 200px; 
    float: left; 
    border: 1px dashed #444; 
    padding: 3px; 
} 
.title { 
    float: right; 
    border: 1px solid #666; 
} 
.subtitle { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    border: 1px solid #f0f; 
}

來源

2011-12-06 16:03:48 thirtydot

嗨，它可能不是一個完美的解決方案，但它工作... 它可以是一個好的開始。

我將主標題定位在使用絕對定位的子標題上，並在主標題div中使用顏色背景隱藏字幕文本。

<html> 
<head> 
    <style type="text/css"> 
.title { 
    height: 25px; 
    width: 300px; 
    position: relative; 
} 
.maintitle 
{ 
    height: 25px; 
    border:1px solid red; 
    font-size: 21px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 2; 
    padding-left: 10px; /* to give space to the left on the main title */ 
    background-color: #ffffff; /* to hide the text under it. */ 
} 
.subtitle { 
    height: 20px; 
    overflow:hidden; 
    border: 1px solid blue; 
    max-width: 290px; /* to make sure the sub-title dont fall on two line */ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 

    </style> 
</head> 

<body> 
    <div class="title"> 
     <div class="maintitle"> 
      Title number 1 
     </div> 

     <div class="subtitle"> 
      This is subtitle that is longer with even more text 
     </div> 
    </div> 
</body> 
</html>

來源

2011-12-06 15:43:10

這裏，似乎工作的嘗試：http://jsfiddle.net/3nCuJ/（以下列明）

具體地說，我做了標題浮動的權利，而不是字幕浮動離開。這可以確保整個標題在副標題之上可見。然後，爲了正確製作字幕剪輯，我添加了一個內部div來包含字幕文本。

如果你想讓小標題停在一個字邊界用這個代替：http://jsfiddle.net/3nCuJ/1/

HTML：

<div class="outer"> 
    <div class="title">Title number 1</div> 
    <div class="subtitle"><div class="subtitle_inner">This is subtitle that is longer with even more text</div></div> 
</div>

CSS：

.outer { 
    height: 25px; 
    width: 300px; 
} 
.title { 
    height: 23px; 
    float: right; 
    border:1px solid red; 
} 
.subtitle { 
    height: 23px; 
    overflow:hidden; 
    border: 1px solid blue; 
} 
.subtitle_inner { 
    width: 300px; 
}

來源

2011-12-06 15:50:22

如何組織這種佈局溢出？

回答

相關問題