Разная высота в родительском DIV - PullRequest
Новая
       5

Разная высота в родительском DIV

0 голосов
/ 25 февраля 2012

http://jsfiddle.net/fdezluis96/JJ29E/3/

Я создаю панель в стиле Twitter и хочу, чтобы она отображала некоторые уведомления, как показано в JSFiddle. Это строка меню («Домой», «Подключиться», «Друзья», «Аккаунт») и кнопка входа, и все динамически зависит от ширины браузера, поэтому я не могу поставить ее margin:auto;. Я хочу, чтобы меня отображали как во втором примере, но с синтаксисом первого, поскольку я не могу использовать таблицы. Код: 

.navigation{
    padding:5px;
    font-family: HelveticaNeue, Tahoma, Verdana;
    color: #fff;
    font-size:20px;
    background: #333;
    height:24px;
    overflow:hidden;
}
.subnavigation{
    border:1px solid #fff;
    border-top-width:0px;
    border-bottom-width:0px;
    overflow: auto;
    background: #666;
    border-radius:5px;
    border-top-right-radius:0px;
    border-top-left-radius:0px;
}
table{
    float:left;
}

​

И HTML: 

<!--Example one, desired syntax, not working-->
<div class="navigation">A
    <div class="subnavigation">B.</div>
    A
</div>

<br />
<!--Example two, working but with tables, so its not viable-->
<table>
    <td class="navigation">A</td>
</table>
<table>
    <td class="navigation subnavigation">
        Scroll content<br />
        Lorem ipsum...LALALALA<br />
        Just more stuff<br />
        And more<br />
        And a bit more...
    </td>
</table>
<table>
    <td class="navigation">A</td>
</table>

Спасибо;)

Ответы [ 3 ]

5 голосов
/ 25 февраля 2012

Хорошо. Здесь происходит несколько вещей.

Во-первых, вам действительно нужно разделить элементы в вашей навигации. Я использовал div, и я дал им все float: left через класс item. Это выполняет две вещи: он помещает все ваши предметы в одну строку и оборачивает их контейнеры вокруг них, так что ваш «выпадающий список» будет иметь размер, подходящий для самого большого элемента в выпадающем списке.

Во-вторых, вам нужно удалить overflow: hidden из .navigation. Это позволит элементам (в данном случае .item элементам) выходить за границы этого элемента.

В-третьих, настройте поля и отступы. Я сохранил отступ в 5px на .navigation, но я добавил отрицательное верхнее поле и некоторые боковые поля к .item.

Мне неясно, хотите ли вы, чтобы эти элементы прокручивались или отображались как раскрывающийся список, поэтому я выполнил оба действия:

как раскрывающийся список

как поле прокрутки

0 голосов
/ 25 февраля 2012

Вы можете выполнить то же самое, используя divs, но для навигации ul будет более семантическим.

Демо 

li {list-style-type:none; display:block; float:left;}
.navigation{ height:25px; background: #333;}
.subnavigation{width:25%; height:100px; background:gray;}


<ul class="navigation">
        <li>A</li>
    <li class="subnavigation"></li>
    <li>A</li>
</ul>
0 голосов
/ 25 февраля 2012

Если поставить: 

display: inline;

в subnavigation классе, вы должны сделать так, чтобы он выглядел аналогично вашему примеру с таблицей.

Рабочий пример:

Результат таков:

enter image description here

...