CSS растянуть плавающий div горизонтально - PullRequest
Новая
       8

CSS растянуть плавающий div горизонтально

0 голосов
/ 23 июля 2010

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

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

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

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

Ответы [ 5 ]

2 голосов
/ 23 июля 2010

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

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

0 голосов
/ 12 февраля 2016

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

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

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

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

{
    width: 350px;
    margin-left: -25px
}
0 голосов
/ 23 июля 2010

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

0 голосов
/ 23 июля 2010

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

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

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

0 голосов
/ 23 июля 2010 
<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>
...