Разделить панель с помощью свойства CSS3 Resize - PullRequest
Новая
       14

Разделить панель с помощью свойства CSS3 Resize

6 голосов
/ 21 сентября 2010

Я пытался изменить размер разделенной панели, используя свойство CSS3.

Вот код: 

<style>

div.left, div.right {float: left; outline: solid 1px #ccc; 
resize: both; overflow: auto;}

div.left {width: 20%}

div.right {width: 80%}

</style> 

<div class="left"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div> 

<div class="right"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
</div>

Проблема в том, что если я изменю размер левого div, правый div не сжимается, и его толкают вниз. Есть ли другие способы сделать разделенную панель без использования JavaScript?

Скажем, если это невозможно сделать с помощью CSS3 и действительно нужно использовать javascript, JavaScript должен быть минимальным, если можно.

Спасибо.

1 Ответ

9 голосов
/ 22 сентября 2010

Я не уверен, почему вы ожидаете, что другой элемент изменит размер - кажется, между ними нет различий в вашей разметке?

Предполагается, что вы нацелены на снимки разработки WebKit и Firefox.это должно делать большую часть того, что вас интересует:

  1. Создайте элемент-обертку и установите для него значение display: box (используя соответствующие префиксы вендора)
  2. Установите один из ваших элементовбыть фиксированного размера, но с изменяемым размером, в противном случае все становится слишком запутанным для браузера
  3. Установите для другого значение box-flex: 1 (снова с соответствующими префиксами )

Вот рабочий пример , работает в Chrome лучше, чем Firefox - если вам нужны другие поддерживаемые браузеры, вам понадобится решение JavaScript.

- edit:

Только что получил ответ на этот старый ответ, старый пример не работает с новой версией flexbox, поэтому вот новый пример .На вышеуказанных этапах замените display: box на display: flex и box-flex: 1 на flex: 1 1 0;.

...