更改div的宽度以匹配span标签的宽度

Question

这是我在这里的第一篇文章。 我一直在搜索以前发布的问题，这些问题听起来与我遇到的问题类似，但我尝试了这些答案，但仍未使它起作用。

我得到以下代码。 有点类似于我正在研究的内容。

CSS：

.ContentTable {
    width:100%;
    heigth:100%;
    empty-cells:show;
}

.WidthLimited{
    overflow:scroll;
    overflow-x:auto;
    overflow-y:hidden;
}

.ResultListContainer{
    width:95%;
    color:black;    
}

HTML：

<div id="Wrapper">
    <div id="Content1"><div/> 
    <span id"SearchControl">
        <table class="ContentTable">
            <tbody>
                <tr id="Title">Title here</tr>              
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Footer">
                    <td>Some text</td>
                </tr>
            </tbody>
        </table>
    </span>

    <div id="ResultListWrapper" class="WidthLimited">
        <table class="ResultListContainer">
            <tbody>
                <tr id="Title">Title here</tr>              
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Body">
                    <td>Some text 1</td>
                    <td>Some text 2</td>
                    <td>Some text 3</td>
                </tr>
                <tr id="Footer">
                    <td>Some text</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

还获得了以下JavaScript来能够调整宽度：

function fn_wrapperResultList()
{
    var wObj = document.getElementById("ResultListWrapper");
    var pObj = document.getElementById("SearchControl");

    if(window.attachEvent) 
    {                
        if(pObj.offsetWidth>wObj.offsetWidth)
        {
            wObj.style.width=pObj.offsetWidth; 
        }
    }
    else
    {
        wObj.style.width='100%'; 
    }
}

实质上，我要完成的工作是调整ResultList的宽度（在本例中，该宽度比我的SearchControl宽），并在前者的宽度大于后者的宽度时匹配SearchControl的宽度（ResultList.width> SearchControl .width，然后对其进行调整）。

如果我为WidthLimited类分配了固定的宽度，则控件的确会更改，并且scroll-x可以正常显示，并且可以按预期工作，但是我正在尝试根据SearchControl对其进行更改。

我已经尝试了很多事情：使用getComputedStyle计算宽度并将其分配给该JavaScript代码中的wObj.style.width，它会在更改时但仍不调整大小。 我添加了display:inline-block; 到.WidthLimited类，什么也没有。 我读到，跨度实际上并没有特定的宽度，但是在这一点上，改变那一块并不是真正的选择。

有没有办法实现我的预期？

Answer 1

看看这个jsFiddle 。 那是你的追求吗？

var searchControl = $('#SearchControl');
var resultList = $('#ResultListContainer');
if (searchControl.width() > resultList.width())
    resultList.width(searchControl.width());

如果您不熟悉jQuery，请在此处查看 。 理想情况下，您应该使用CSS进行布局，并且仅在真正必要时才使用javascript。 如果您可以更确切地了解您要尝试执行的操作，我们可以帮助您找到基于CSS的解决方案。 另外，您还应注意id和class属性之间的区别。 请参阅此处以获取概述。 希望对您有所帮助。

Answer 2

@Chopper我对您的初始[jsFiddle]（ http://jsfiddle.net/CsYVE/35/ ）进行了更改，幸运的是，它现在可以工作了！ 生成的脚本如下所示：

var searchControl = $('#SearchControl'); 
var resultList = $('#ResultListWrapper'); 

if (resultList.width() > searchControl.width()) 
    resultList.width(searchControl.width());

可以在IE9，Chrome，FF和Opera中正常运行