css stretch плавающий div горизонтально

Я пытаюсь сделать div со статической высотой и переменной шириной. С несколькими горизонтальными вкладками. Активная вкладка должна растягиваться горизонтально, чтобы заполнить контейнер, а неактивные вкладки должны уменьшаться до своего неактивного размера (в данном случае 24 пикселя).

Я не могу заставить его работать. Вкладка растягивается, но слишком сильно. Он поднимает вкладки после следующей строки, чего не должно быть. Я не могу понять, как заставить это работать так, как я хочу.

То, что я пытаюсь сделать, можно увидеть на [ссылка удалена]

Я уверен, что есть способ сделать это, как я видел это раньше, но я не могу найти пример этого. Знаешь что я делаю не так?

Источник

5 ответов

Решение

Вы ищете горизонтальную гармошку?

В Интернете есть несколько примеров. Возможно, лучше всего полагаться на Javascript для выполнения вычислений, если вы хотите, чтобы открытая вкладка занимала все пространство МИНУС ширины вкладок контейнера.

Источник

У меня сработал следующий подход:

Пусть "w" будет исходной шириной div, и вы хотите растянуть его на "x" пикселей. Добавляем следующий CSS:

{
    width: (w + x) px;
    margin-left: -x/2 px
}

Например, если исходная ширина равна 300px, и вы хотите растянуть ее на 50px, дополнительный CSS будет:

{
    width: 350px;
    margin-left: -25px
}
Источник

Дополнительные элементы, вероятно, переносятся на следующую строку, потому что ширина открытой вкладки равна 100% - попробуйте установить ее на 80% или 90%, чтобы оставить место для дополнительных "вкладок" после нее. "Закрытые" вкладки, вероятно, также должны иметь ширину в процентах, которая должна складываться вместе, чтобы равняться 100% - полной ширине их контейнера.

Источник 
<style>
#navigation
{
   border: 1px solid #000000;
   height: 400px;
   margin: 10px 25px;
   padding: 0px;
   width: auto;
}
.item
{
   display: block;
   float: left;
   height: 100%;
   margin: 0px;
   overflow: hidden;
}
.item img { float: left; margin-right: 5px;}
.closed
{
   width: 10%;
}
.open
{
   width: 80%;
}

</style>

</head>

   <body>
      <div id="navigation">
         <div class="item open">
            <img src="hometab.png" alt="Home" />

            Open Tab Open Tab
         </div>
         <div class="item closed">
            <img src="hometab.png" alt="Home" />
            Open Tab Open Tab
         </div>
         <div class="item closed">
            <img src="hometab.png" alt="Home" />
            Open Tab Open Tab
         </div>

      </div>
Источник

Насколько вы привержены width:auto на #navigation?

Если вы установите ширину #navigation к чему-то фиксированному, а также установить соответствующие значения ширины для .open тогда это выглядит довольно хорошо.

Когда я играл с вашим примером в FireBug, я использовал 400 для #navigation и 350 за .open и, похоже, хорошо работает.

Источник
Другие вопросы по тегам