将跨度元素的高度设置为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％

回答

相关问题