1

私は現在、ソフトウェアのテーマ/スタイルを構築しています。

現在、コードは次のようになっています。

http://jsfiddle.net/afseW/1/

関連するコードは次のとおりです。

body div[type*=privmsg] .sender {
    font-weight: 700;
    width:134px;
    text-shadow: #fff 0px 1px; 
    background-color: #eee;
    min-height:22px;
    border-right: 1px solid #dcdcdc;
    padding-right:5px;
    text-align:right;
    display:inline-block;
    overflow: auto;
}

フィドルでは、何らかの理由でテキストが 2 行目に折りたたまれていることに注意してください。一方、クライアントでは、画像は次のようになります。

クライアントが現在示していること

確かに、スパンはブロックであることを意図していないため、次のプロパティを指定しました。display: inline-block;

しかし、親の p ブロックを継承する高さを取得するにはどうすればよいですか?

4

2 に答える 2

1

DOM構造を変更しました。インライン スタイルを参照してください。最初のdiv(.message) では、.clearfixクラスを追加するより良い解決策を好みます。これを参照してください。

<div class="message" type="privmsg" style="overflow: auto;">
  <div class="sender-cont" style="width: 30%; float: left;">
    <span class="sender" ondblclick="Textual.nicknameDoubleClicked()"   oncontextmenu="Textual.openStandardNicknameContextualMenu()" type="myself" nick="shamil" colornumber="20">+shamil</span>
  </div>

  <div style="width: 70%; float: left;">
Welcome to <span class="channel" ondblclick="Textual.channelNameDoubleClicked()" oncontextmenu="Textual.openChannelNameContextualMenu()">#textual-testing</span>! This channel is for the users of the Textual IRC Client to test scripts and do other activities in an unregulated environment. — <span class="inline_nickname" ondblclick="Textual.inlineNicknameDoubleClicked()" oncontextmenu="Textual.openInlineNicknameContextualMenu()" colornumber="3">milky</span>'s law states: "On IRC, after a user has executed a command that outputs interesting information to a channel (i.e. /sysinfo), then there will be at least two users that do the same."
  </div>
</div>

お役に立てれば！

于 2013-07-18T22:04:37.817 に答える
0

スパンは幅が設定されているため、おそらくここで行う最も簡単な方法は、スパンに絶対位置を持たせることです。

body div[type*=privmsg] .sender,
body div[type*=action] .sender {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    ...
}

次に、親要素にパディングを追加します。

body span.message {
    position: relative;
    padding-left: 140px;
    ...
}

http://jsfiddle.net/afseW/3/

PS : 次回は jsfiddle でトリミングされたバージョンを提供してください。ここの html と css はかなり壮大です。

于 2013-07-18T21:51:29.867 に答える