CSS параллельные DIVs - Dynatree не заполняется горизонтально - PullRequest
Новая
       2

CSS параллельные DIVs - Dynatree не заполняется горизонтально

1 голос
/ 19 января 2012

У меня есть два параллельных DIV в JSP. Это работает хорошо, за одним исключением: я не могу заставить jQuery Dynatree правильно заполнить горизонтальное пространство левой DIV:

enter image description here

enter image description here

Вот 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. Есть идеи, что случилось? Спасибо за помощь!

1 Ответ

2 голосов
/ 19 января 2012

Ваша #tree ширина установлена ​​на 250px; 

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

Если вы установите его на 100% (или вообще удалите свойство width), он заполнит свой контейнер (#sub-left).

Это также причина, по которой он выходит за пределы контейнера #sub-left, когда вы сжимаете окно (второе изображение), так как 250px становится больше, чем 24% доступного размера.

...