Question

我正在尝试根据另一个（源）的clientWidth动态调整一个DIV（目标）的宽度。

注意：源DIV的CSS样式是width：auto;

第一个问题：它不起作用......它必须是我的语法或其他东西......？

第二个问题：当用户更改浏览器窗口时需要动态调整大小（在窗口调整大小时调用脚本）。怎么???

使用Javascript：

<script>

// START RESIZE WIDTH SCRIPT
function resizetarget(){

var resizesource = document.getElementById('section');
var sourcewidth = resizesource.style.clientWidth;
var resizetarget = document.getElementById('collpilewrapper');
var targetwidth = resizetarget.style.clientWidth;

targetwidth = sourcewidth;

}

</script>

CSS：

.section{
    width:auto;
    max-height:75%;
    top:60px;
    bottom:60px;
    margin-bottom:60px;
    left:280px;
    right:0px;
    position:absolute;
    background-color:#FFF;
    white-space:nowrap;
    display:inline-block;
}
.section li{float:left; display: inline; }
.pane{
    overflow:auto;
    clear:left;
    position:relative;
    width:100%;
    height:100%;
    }

#collpilewrapper{
    min-width:900px;
    min-height:100%;
    float:left;
    background-color:#69C;
    display:table-column;
    }

HTML：

<!--start content-->

<div class="section">

<div id="pane-target" class="pane">

<ul class="elements" style="width:16000px">

<!--box 0 -->
<li>
<!-- START landing group -->

    <div id="collpilewrapper">

          <div id="collpile1">
          <img src="images/coll-missy-714x737.jpg" /></div>

          <div id="collpile2">
          <img src="images/coll-girls-602x476.jpg" /></div>

          <div id="collpile3">
          <img src="images/coll-toddler-421x447.jpg" /></div>

    </div>

<!-- END landing group -->

</li>

<!--box 1 -->
<li>
<!-- START missy group -->
<div id="adbox">
<img class="largead" src="images/storypic-na.jpg" />
</div>
<div id="adbox">
<img class="largead" src="images/videostill1.jpg" />
</div>
<!-- END missy group -->

</li>
</ul>     
</div>
</div>

<!--end content-->

Answer 1

jsfiddle

我使用jQuery，因为我发现它更容易使用。我注意到有几个问题。您按ID定位元素，但section是一个类，而不是id。我用Google搜索时看到的style.clientWidth没有得到正式的支持。它看起来像IE曾经使用的东西（老实说，我对它一无所知）。

的的jQuery 的

function resizeWidth(source, target){ var sourcewidth = $(source).width(); $(target).css({ "width": sourcewidth }); } $(window).resize(function() { resizeWidth("#section", "#collpilewrapper"); });

当窗口调整大小时，无论你在其中放置什么代码都会运行。

$(window).resize(function() { });

resizeWidth()是我自己创造的一项功能。它需要source和target。

width()将为您提供元素的宽度。

css()允许我们直接更改CSS。

最后，您会注意到它看起来不像大蓝框重新调整大小。那是因为你的最小宽度为900px。此外，只有在重新调整浏览器大小时才会触发事件。首次加载页面时，它不会执行任何操作。

根据宽度设置为auto的其他div的客户端宽度调整目标div的大小

1 个答案: