根據前一跨度的寬度將動態寬度設置爲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

回答

相關問題