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宽）并且当前者的宽度高于后者的宽度（ResultList）时匹配SearchControl的宽度。 width＆gt; SearchControl.width然后调整它。）

如果我为WidthLimited类指定了一个固定的宽度，我的控件确实会更改并且滚动显示没有任何问题，并按预期工作，但我试图根据SearchControl进行更改。

我已经尝试了很多东西：使用getComputedStyle计算宽度并将其分配给该JavaScript代码中的wObj.style.width，它确实会更改但仍然不会调整大小。我将display:inline-block;添加到了.WidthLimited类，没有添加任何内容。我读到跨度并没有真正具有特定的宽度，但此时更改该部分并不是一个真正的选项。

有没有办法实现我想要的目标？

Answer 1

看看this jsFiddle。这就是你追求的吗？

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

如果您不熟悉jQuery，请查看here。理想情况下，您应该在CSS中进行布局，并且只在必要时才使用javascript。如果您可以更具体地了解您正在尝试做什么，我们可以帮助您找到基于CSS的解决方案。另外，您应该注意id和class属性之间的区别。有关概述，请参阅here。我希望有所帮助。

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，没有任何问题

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

2 个答案: