zvezda_t Posted June 27, 2015 Report Share Posted June 27, 2015 Дорогие мои и уважаемые программисты.Подскажите, пожалуйста, почему, если закомментировать в классе .new рамку:.new { /*border: 2px solid fuchsia;*/ overflow: hidden; float: left;}нажать на кнопку добавить, а потом на кнопку удалить - то поле w(бирюзовое) не расстягивается на всю ширину?Почему рамка влияет на растяжение другого div? https://jsfiddle.net/upzfr4q5/ Quote Link to comment Share on other sites More sharing options...
0 tt48 Posted June 27, 2015 Report Share Posted June 27, 2015 (edited) хмм..вот это уже сложный вопрос.Это надо вспоминать, как я 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:Готовое работающее на CSShttp://beavers-net.narod.ru/primers/probe_Zt.htmlhttp://beavers-net.narod.ru/primers/probe_Zt-inline.html Edited June 27, 2015 by tt48 Quote Link to comment Share on other sites More sharing options...
0 tt48 Posted June 27, 2015 Report Share Posted June 27, 2015 (edited) косяк аналогично без костылей работает, если убрать бордюр, но добавить padding:1px;костыль:https://jsfiddle.net/upzfr4q5/17/-- show и hide добавил в скрипт. От него($.hide()) нужно только display: none; после $('#btnDel').click() Edited June 27, 2015 by tt48 Quote Link to comment Share on other sites More sharing options...
0 zvezda_t Posted June 27, 2015 Author Report Share Posted June 27, 2015 Спасибо, за ответ.Подскажите, пожалуйста, а возможно, чтоб после появляения черного квадрата (.item), .w уменьшился в ширине(сейчас это работает), и при этом по высоте был по центру #wrapper?то есть высота #wrapper за счет добавления черного квадрата (.item) увеличится, и .w всегда должен быть по центру #wrapper Quote Link to comment Share on other sites More sharing options...
0 zvezda_t Posted June 28, 2015 Author Report Share Posted June 28, 2015 (edited) Спасибо, большое за помощь! вот что получилось https://jsfiddle.net/t7zewxar/Подскажите, пожалуйста, а Вы сказали через js проще. А как через js сделать? Edited June 28, 2015 by zvezda_t Quote Link to comment Share on other sites More sharing options...
0 tt48 Posted June 28, 2015 Report Share Posted June 28, 2015 теперь, когда есть решение через css, то решение на js, ввиду доп. врем. затрат - сложнее Суть решения на js - это расширение решения 1: по сути, там нужно будет только озадачиться проверкой высоты центрируемого блока при увеличении\уменьшении масштаба.Масштаб изменился - проверить высоту центрируемого блока и задать в css .w{ margin-top: ... отрицательное смещение, равное половине текущей (computed height) высоты данного блока. Ввиду того, что есть решение 2, которое использует лишь 2 доп. блока, решение с js уже не кажется оптимальным. Проще не выходит в общем-то - js упомянул не продумав решение до конца, исходя из того, что на css сразу не получилось и логического объяснения к тому не вышло. Я не говорил, что на js проще Я сказал - "не интересно" Quote Link to comment Share on other sites More sharing options...
0 zvezda_t Posted June 28, 2015 Author Report Share Posted June 28, 2015 (edited) Ясно. Спасибо.Просто если изначально wraper не задавать высоту фиксированную, то перестает работать((https://jsfiddle.net/9f3ade44/ Подскажите, пожалуйста, почему у меня высота #wraper после нажатия на add, не увеличивается?https://jsfiddle.net/9ecq52zq/ Edited June 28, 2015 by zvezda_t Quote Link to comment Share on other sites More sharing options...
0 tt48 Posted June 28, 2015 Report Share Posted June 28, 2015 по 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 Quote Link to comment Share on other sites More sharing options...
0 zvezda_t Posted June 28, 2015 Author Report Share Posted June 28, 2015 On 6/28/2015 at 3:30 PM, tt48 said: а с чего бы ей увеличиваться? так я же задаю $('.panel').find('#wraper').css('height', 110);не изменит что ли? спасибо, Вам большое) попробую с табличками) Quote Link to comment Share on other sites More sharing options...
0 tt48 Posted June 28, 2015 Report Share Posted June 28, 2015 забыл про jsОпечатка там. wrapper Quote Link to comment Share on other sites More sharing options...
Question
zvezda_t
Link to comment
Share on other sites
9 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.