0

这是我在此的头一篇博文。我一直在搜索以前发布的听起来与我遇到的问题相似的问题，我已经尝试了这些答案，但仍然没有让它起作用。

我得到了以下代码。有点类似于我正在做的事情。

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课程中，但什么也没有。我读到该跨度实际上并没有特定的宽度，但此时更改该部分并不是一个真正的选择。

有没有办法实现我的意图？

4

2 回答 2

0

@Chopper I made changes to your initial [jsFiddle] (http://jsfiddle.net/CsYVE/35/) and luckily it is working now! The resulting script looks like this: 

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

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

This works in IE9, Chrome, FF and Opera with no issues

于 2013-09-13T15:17:50.783 回答
0

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

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

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

于 2013-09-13T05:26:49.013 回答