jquery - CSS 并排 DIV - Dynatree 不水平填充

Question

我在 JSP 中有两个并排的 DIV。它运行良好，但有一个异常(exception):我无法让 jQuery Dynatree 正确填充左侧 DIV 的水平空间:

这是 HTML:

<div id="sub-title">
   <div id="sub-left">
    <fieldset class="search-fields">
        <legend>Files Found</legend>
        <!-- Add a <div> element where the tree should appear: -->
        <div id="tree"> 
        </div>
      </fieldset>
   </div>
   <div id="sub-right">
     <fieldset class="search-fields">
        <legend id="selectedFileLegend">Selected File Contents</legend>
        <textarea name="fileContents" id="fileContents" rows="20" readonly="readonly" wrap='off'>
(select via tree on left)
        </textarea>
     </fieldset>
   </div>
   <div class="clear-both"></div>
</div>

和 CSS:

#sub-left {
/*    background: #99FF99;  pale green */
/*    border:1px dashed; */
   float: left;
   width: 24%;
}
#sub-right {
/*    background: #FFCC99;  pale orange */
/*    border:1px dashed; */
   float: right;
   width: 73%;
}
#sub-title { 
    overflow:hidden; 
}
.clear-both {
   clear: both;
}

#tree {
  vertical-align: top;
  width: 250px;
}

我当然也使用dynatree CSS。知道出了什么问题吗？感谢您的帮助!

Answer 1

你的#tree宽度设置为250px；

#tree {
  vertical-align: top;
  width: 250px;
}

如果您将它设置为 100%(或完全删除 width 属性)，它将填满其容器 (#sub-left)。

这也是为什么当您缩小窗口(第二张图片)时它会超出 #sub-left 容器的原因，因为 250px 变得大于可用大小的 24%。