Растяжение div на всю строку. Как убрать рамку?

[zvezda_t]

Дорогие мои и уважаемые программисты.

Подскажите, пожалуйста, почему, если закомментировать в классе .new рамку:

.new {

   /*border: 2px solid fuchsia;*/

   overflow: hidden;

   float: left;

}

нажать на кнопку добавить, а потом на кнопку удалить - то поле w(бирюзовое) не расстягивается на всю ширину?

Почему рамка влияет на растяжение другого div? 

 

https://jsfiddle.net/upzfr4q5/

[tt48]

хмм..вот это уже сложный вопрос.

Это надо вспоминать, как я 4 года назад делал конструкцию из Inline-блоков, занимающих фикс+оставшееся место по ширине..

Думал, прокатит и

https://jsfiddle.net/upzfr4q5/31/но см. ниже.

 

 

Это уже навороты идут, а, значит, следует подумать: нужно ли столько универсальности или размеры постоянны и меняться на деле не будут.

Решаемо через js - это уже писать не интересно.

 

... как интересно..ересь какая-то творится

 .w{/*.....*//*========== Чтобы было посередине: ===========*/    position: relative;/*это чтобы top: -10px; сработал*/    margin-top: -10px; /**/    top: 50%;/*здесь фикс. высота блока*/    /*border:1px solid red;/*если закомментить, то блок не сдвигается при появлении блока new,    а если разкомментить, то по нажатию на add он просто сваливается вниз*/}

Это какие-то неправильные пчелы..Стоит сделать-таки полную страничку с примером.

Впрочем, может relative себя и правильно ведет.. надо перечитать раздел про box model

———————————-

 

UPD:

Готовое работающее на CSS

http://beavers-net.narod.ru/primers/probe_Zt.html

http://beavers-net.narod.ru/primers/probe_Zt-inline.html

Edited June 27, 2015 by tt48

[tt48]

косяк аналогично без костылей работает, если убрать бордюр, но добавить padding:1px;

костыль:

https://jsfiddle.net/upzfr4q5/17/

-- show и hide добавил в скрипт. От него($.hide()) нужно только display: none; после $('#btnDel').click()

Edited June 27, 2015 by tt48

[zvezda_t]

Спасибо, за ответ.

Подскажите, пожалуйста, а возможно, чтоб после появляения черного квадрата (.item), .w уменьшился в ширине(сейчас это работает), и при этом по высоте был по центру #wrapper?

то есть высота #wrapper за счет добавления черного квадрата (.item) увеличится, и .w всегда должен быть по центру #wrapper

[zvezda_t]

Спасибо, большое за помощь! вот что получилось https://jsfiddle.net/t7zewxar/

Подскажите, пожалуйста, а Вы сказали через js проще. А как через js сделать?

Edited June 28, 2015 by zvezda_t

[tt48]

теперь, когда есть решение через css, то решение на js, ввиду доп. врем. затрат - сложнее

 

Суть решения на js - это расширение решения 1:

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

Масштаб изменился - проверить высоту центрируемого блока и задать в css .w{ margin-top: ... отрицательное смещение, равное половине текущей (computed height) высоты данного блока.

 

Ввиду того, что есть решение 2, которое использует лишь 2 доп. блока, решение с js уже не кажется оптимальным.

 

Проще не выходит в общем-то - js упомянул не продумав решение до конца, исходя из того, что на css сразу не получилось и логического объяснения к тому не вышло. Я не говорил, что на js проще Я сказал - "не интересно"

[zvezda_t]

Ясно. Спасибо.

Просто если изначально wraper не задавать высоту фиксированную, то перестает работать((

https://jsfiddle.net/9f3ade44/

 

Подскажите, пожалуйста, почему у меня высота #wraper после нажатия на add, не увеличивается?

https://jsfiddle.net/9ecq52zq/

Edited June 28, 2015 by zvezda_t

[tt48]

по https://jsfiddle.net/9ecq52zq/

а с чего бы ей увеличиваться?

#wrapper {       border: 2px solid blue;   height: 60px;    overflow: hidden; }

задана фикс. высота - уже этого достаточно, чтобы блок не изменялся по высоте. Это вам не либеральные таблицы, которые заботятся о своём содержимом.

 

По https://jsfiddle.net/9f3ade44/

Разумеется, оно работать не будет - см. условия, при которых можно растянуть div на 100% от родителя:

должна быть указана высота в явном виде.

Либо использовать position: absolute; но тогда придется наплевать на изменения ширины, т.к. поведение такого блока не подразумевает учет других блоков рядом с ним - у него свой поток отображения, который кладет на это. -- опять же читаем box model в спецификации css.

 

Если все равно хочется решение - используйте таблицы. Здесь от них вреда не будет.

http://beavers-net.narod.ru/primers/probe_Zt-table.html

[zvezda_t]

а с чего бы ей увеличиваться?

 

так я же задаю $('.panel').find('#wraper').css('height', 110);

не изменит что ли?

 

спасибо, Вам большое) попробую с табличками)

[tt48]

забыл про js

Опечатка там. wrapper