CSS жидкость «колонка» - PullRequest
Новая
       6

CSS жидкость «колонка»

5 голосов
/ 23 апреля 2009

Какой лучший способ получить этот макет в CSS? представьте себе, что у меня есть три элемента div, два элемента div внутри другого ... из двух внутренних элементов div, первый из которых имеет определенную ширину, а второй блок, как ожидается, займет оставшееся пространство.

Как правило, я бы в конечном итоге установил определенную ширину во втором столбце и справился бы с ее обновлением в конце, когда изменилась содержащаяся ширина div.

Если я плаваю в фиксированной, но не в жидкости, столб жидкости будет оборачиваться под фиксированным div (а не в том, что нужно). 

+-------+  +--------------------------------------+
| fixed |  |                                      |
+-------+  |               fluid                  |
           |                                      |        
           |                                      |
           +--------------------------------------+

<div>
  <div>fixed</div>
  <div>fluid</div>
</div>

Это должно быть полностью css-решение, без javascript-фреймворков, и в идеале оно работает в наиболее часто используемых браузерах с минимальным «взломом» (если вообще).

Надеюсь, что ASCII произведения искусства,

Спасибо.

Ответы [ 4 ]

16 голосов
/ 23 апреля 2009

разметка 

<div id="fixed">fixed content</div>
<div id="fluid">fluid content</div>

КСС 

#fixed {
  float: left;
  width: 13em;
  margin-right: -14em;
}
#fluid {
  margin-left: 14em;
}

Это должно сработать. Я использую это на моем личном сайте. Поля заставляют все это оставаться на одном уровне.

1 голос
/ 29 апреля 2009

Вы можете использовать Emastic CSS Framework , который поддерживает текучие столбцы. Здесь Ссылка является рабочим примером, похожим на ваше "ASCII artwork":)

0 голосов
/ 12 декабря 2013

На самом деле есть еще более простое решение, которое я обнаружил не так давно. Хорошо работает до IE7. #Fluid div будет перемещаться вверх рядом с исправленным исправлением и занимать оставшееся пространство, сохраняя при этом большую плавность для всех отзывчивых сайтов. 

#fixed{
     width:200px;
     float:left;
}
#fluid{
    overflow:hidden;
}
0 голосов
/ 24 апреля 2009

Надеюсь, это поможет вам начать работу: 

* {
   margin:0;
}

div#wrapper {
   margin:0;
   height:auto !important; //IE Hack
   height:100%; //IE Hack
   min-height:100%;
   overflow:auto
}

div#fixed{
   float:left;
   position:absolute;
   background-color:red;
   margin:0;
   height:200px;
   width:200px
}

div#fluid{
   float:right;
   position:absolute;
   left:200px;
   background-color:blue;
   display:block;
   height:80%;
   width:60%
}

"Обертка" будет вашим упаковочным дивом. Я только установил колонку жидкости на ширину 60%, чтобы вы могли видеть, что она должна действовать плавно. Я проверил это в Opera 10, IE 6 и Firefox 3 с небольшими проблемами. IE хочет добавить дополнительные 200 пикселей вправо, если вы установите ширину столбца жидкости на 100%. Я уверен, что где-то есть обходной путь.

...