オーバーフローでこのレイアウトを整理するにはどうすればよいですか？

divの位置とレイアウトに問題があります。オーバーフローでこのレイアウトを整理するにはどうすればよいですか？

私がしたいレイアウト： 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のカラーbakgroundを使用してサブタイトルテキストを非表示にしました。ここで

<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

オーバーフローでこのレイアウトを整理するにはどうすればよいですか？

答えて

関連する問題