根据前一跨度的宽度将动态宽度设置为div

我有两个元素;即一个跨度，然后是一个div。跨度的内容应该具有长度为25到30个字符的最大值，并且div的内容可以是段落（并且这两个内容都是动态的）。我的客户想要的是将div的宽度设置为与跨度相同（不存在高度问题）。现在我使用JS实现了这一点，并且工作正常，我们可以使用CSS来做到这一点，这样我的生活将会变得更加轻松吗？根据前一跨度的宽度将动态宽度设置为div

感谢您的回复。

Tismon Varghese。

编辑：请参考下面

<div class="wrapper"> 
<span class="summary-headder"> Header Header Header Header Header </span> 
<div class="summary-comment" style="width: 495px;"> 
    test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment test comment   
</div> 
</div> 

var summary_headder_width = $('.summary-headder').width(); 

$('.summary-comment').css('width', summary_headder_width + 'px');

来源

2014-01-16 user2869757

我们可以看到代码做呢？ – Naele

请参阅编辑部分 – user2869757

这样做将是一个方法的代码已经显示为一个表的包装（显示：表;）的一个固定的1px宽度（宽度：1px;）并使用white-space：nowrap标题覆盖此宽度。下面的div表示宽度不会超过宽度。

div.wrapper { 
    display:table; 
    width:1px; 
} 

span.summary-header { 
    display:table-row; 
    background-color:green; 
    white-space:nowrap; 
} 

div.summary-comment { 
    display:table-row; 
    background-color:blue; 
}

查看此Fiddle为合适的解决方案。

来源

2014-01-16 16:11:51 Kad

非常感谢！它的工作原理和这是我正在寻找... – user2869757

这

<div style="display: table"> 
    <span style="display: table-row">Test text test text test text</span> 
    <div style="display: table-row; border: 1px solid black; width: 100%; float: left">test</div> 
</div>

http://jsfiddle.net/Xg8eT/

来源

2014-01-16 16:11:08 Eternal1

中的代码这不起作用，我已将您的[fiddle]（http://jsfiddle.net/dK5Qu/1/）分叉以演示不良结果测试用例。 – Kad

您可以使用一个表 http://jsfiddle.net/zNJ34/1/

<table> 
    <tr> 
     <th>Header Header Header Header Header</th> 
    </tr> 
    <tr> 
     <td>test comment test comment test comment test comment test comment test comment</td> 
    </tr> 
</table>

来源

2014-01-16 16:19:02 Naele

表路径似乎是正确的，但你的解决方案不会回答@ user2869757的问题。按照我的理解，他希望的宽度自动匹配的宽度，而不是相反。 – Kad

根据前一跨度的宽度将动态宽度设置为div

回答

相关问题