Встроенные div с вертикальными списками - PullRequest
Новая
       15

Встроенные div с вертикальными списками

1 голос
/ 07 декабря 2011

Я пытаюсь создать раздел нижнего колонтитула для моего сайта, и у меня возникают проблемы с кросс-браузерными совместимыми решениями.Мне нужен способ отображения встроенных div с вертикальными списками внутри них.например. 

Div 1     Div 2
.li one   .li one
.li two   .li two
          .li three

Любая помощь будет оценена!

Ответы [ 2 ]

3 голосов
/ 07 декабря 2011

Вот краткий пример использования поплавков и простого хака clear:both;, позволяющего хранить внутри div'ы, скажем, нижний колонтитул ...

CSS: 

.foot-box {
  width: 200px;
  float: left;
  margin-right: 10px;
}

HTML: 

<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>
<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>
<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>
<div style="clear:both;"></div>

http://jsfiddle.net/YASU5/

0 голосов
/ 07 декабря 2011

Используя немного ответа @Jakub, вы можете сделать это без необходимости плавать.

CSS: 

.foot-box {
  width: 200px;
  display:inline-block;
  margin-right: 10px;
  vertical-align:top;
}

HTML 

<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>
<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>
<div class="foot-box">
<ul>
 <li>element</li>
 <li>element</li>
 <li>element</li>
 <li>element</li>
</ul>
</div>

Это позволит спискам иметь разное количество элементов.

http://jsfiddle.net/XHtnU/

...