выравнивание css дерева divs

Я не эксперт по css.выравнивание css дерева divs

Таким образом, это может быть легко.

У меня есть древовидная структура во вложенном div. Каждый вложенный div должен иметь одинаковую ширину. Надеюсь, мой пример демонстрирует эту проблему.

<head> 
    <style> 
     .CssWrapper { 
      width: 800px; 
      overflow: scroll; 
      border: 1px solid #999; 
     } 
     .CssTreeContainer { 
      width: auto; 
      display: inline; 
      float: left; 
      padding-left:20px; 
     } 
     .CssTreeValue { 
      width: auto; 
      float: left; 
      text-align: left; 
      clear: both; 
     } 
     .ParentLabel { 
      width: auto; 
      float: left; 
      text-align: left; 
     } 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 

<body> 
    <div class="CssWrapper"> 
     <div class="CssTreeValue"> 
      <div class="ParentLabel">Main Node A</div> 
      <div class="CssTreeContainer"> 
       <div class="CssTreeValue"> 
        <div class="ParentLabel">Node AA</div> 
        <div class="CssTreeContainer"> 
         <div class="CssTreeValue"> 
          <div class="ParentLabel">Node AAA</div> 
          <div class="CssTreeContainer"> 
           <div class="CssTreeValue">Node AAAA</div> 
           <div class="CssTreeValue">Node AAAB</div> 
          </div> 
         </div> 
         <div class="CssTreeValue"> 
          <div class="ParentLabel">Node AAB (some extra long text)</div> 
          <div class="CssTreeContainer"> 
           <div class="CssTreeValue">Node AABA</div> 
          </div> 
         </div> 
         <div class="CssTreeValue">Node AB</div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="CssTreeValue"> 
      <div class="ParentLabel">Main Node B</div> 
      <div class="CssTreeContainer"> 
       <div class="CssTreeValue"> 
        <div class="ParentLabel">Node BA</div> 
        <div class="CssTreeContainer"> 
         <div class="CssTreeValue"> 
          <div class="ParentLabel">Node BAA</div> 
          <div class="CssTreeContainer"> 
           <div class="CssTreeValue">Node BAAA</div> 
           <div class="CssTreeValue">Node BAAB</div> 
          </div> 
         </div> 
         <div class="CssTreeValue"> 
          <div class="ParentLabel">Node BAB</div> 
          <div class="CssTreeContainer"> 
           <div class="CssTreeValue">Node BABA</div> 
          </div> 
         </div> 
         <div class="CssTreeValue">Node BB</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div style="clear:both;" /> 
    <div id="result" /> 
</body>

Oops! Ваше редактирование не может быть отправлено, потому что:

Похоже, что ваш пост - это в основном код; добавьте еще несколько деталей.

http://jsfiddle.net/UptXg/

источник

2013-02-11 draptik

какой line приятель? – Ramin

почему ты не создаешь скрипку для этого? –

Для этой цели следует использовать неупорядоченные списки, а не DIV. –

Вы собираетесь необходимо указать ширину для всех ваших вложенных дивы, например, так:

.CssWrapper div { 
    width: 800px; 
}

Кроме того, снять дисплей: встроенный, и переполнение; прокрутка, если вам нужны полоски прокрутки повсюду.

источник

2013-02-11 21:14:17 MoonKat1216

Это тоже работает :). – Klik

работает, но мой динамический html/css не оправдает этого ;-) – draptik

Что значит, что это не оправдает его? Таблица стилей Css также должна работать для любых созданных элементов в документе с указанным классом. Если вы меняете классы на лету, это должно сработать. – Klik

Основываясь на информации, которую вы мне дали ...

$('.CssWrapper').find('div').css({width: 800px});

Найдет элементы с классом CssWrapper и поиск по всем потомкам найти div «с. Затем он установит всю свою ширину до 800px

Также работает ответ MoonKat1216. Он использует селектор Css для получения потомков Div класса .CssWrapper; который лучше подходит, потому что он входит в вашу таблицу стилей CSS, и он более организован, чем делает это в javascript, как у меня, потому что вы можете более легко редактировать свои стили CSS, а не искать через javascript-код. Однако, если вы делаете это «на лету» и изменяете значение или классы и т. Д. Это будет путь. Это действительно зависит от вашей ситуации.

источник

2013-02-11 21:16:06 Klik

выравнивание css дерева divs

ответ

Смежные вопросы