將跨度元素的高度設置爲100％

目前，代碼看起來像這樣：

相關的代碼是：

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; 
}

注意，在小提琴，出於某種原因，文本將被縮到第二行，而在客戶端，圖像看起來像這樣：

What the client currently shows

誠然，跨度並不意味着是一個塊，因此我已經給它的屬性：display: inline-block;

但是如何獲取的高度繼承父P擋？

來源

2013-07-18 bear

最後一行（問題）是高度不寬！ – cortex

我認爲你應該改變你的DOM結構。 – cortex

由於跨度是設定的寬度，所以這裏最簡單的做法可能就是讓跨度有一個絕對的位置。

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-18 21:51:29 Godwin

我更改了DOM結構。查看內聯樣式。在第一個div（.message）我喜歡更好的解決方案，添加.clearfix類，請參閱this。

<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-18 22:04:37 cortex

相信我，我很想改變DOM結構，它會讓事情變得如此簡單，但我只能處理我給出的內容，而且我不能改變DOM結構。 – bear

將跨度元素的高度設置爲100％

回答

相關問題