7ion

Господа, решение должно работать именно с версткой из примера. Без Было бы так просто - я бы не спрашивал :) Нашел решение. https://jsfiddle.net/kzosd0wp/5/

Есть <span class="hider">. По :hover он должен показывать свое содержимое. Он может быть вложен в себя на любой глубине. Демо: https://jsfiddle.net/kzosd0wp/3 Проблема: когда срабатывает :hover на корневом .hider, все .hider на всю глубину показывают теги <a>, но не должны. Требуемое поведение: по :hover .hider показывает только свое содержимое и родительских hider, но не содержимое вложенных в него .hider. Сейчас при наведении курсора на внешний hider показывается лишняя ссылка, но не должна. Ее должно быть видно только при наведении на дочерний .hider. Селектор .hider:hover > a не выход, т.к. внутри .hider ссылка может быть обернута во что угодно (или нет). Куда добавить специфичности, чтобы link2 реагировал на :hover только своего .hider?

Вы гений :) Благодаря тому, что вы заюзали transition, клик прилетает в координаты раньше, чем там появится ссылка. Все работает, спасибо!

Вы же поняли, что я не просто так спрашиваю? :) Демо https://jsfiddle.net/0tqgn35L/2/ Зайдите с телефона и попробуйте нажать на текст "Второе предложение". Что произойдет: На span кинется hover Сработает показ ссылки по :hover Клик уйдет в ссылку. ????? Не работает!

Если я буду их убирать-возвращать, ширина <span> будет прыгать. Кроме того, возвращать по какому событию?

Добрый день. Такая задача. В оформлении текста используются невидимые блоки - span.show-on-hover, где color = background-color и где color становится контрастным по .show-on-hover:hover. Вместе с текстом прячутся ссылки и показываются по .show-on-hover:hover a. Всплыла проблема с мобильными пользователями. Чтобы увидеть текст блока, они в него тыкают. Порой они ненароком попадают в невидимую ссылку и тотчас переходят по ней. Нужно чтобы по ссылке невозможно было перейти с первого тапа, первый тап должен только кинуть :hover на .show-on-hover, и только вторым тапом можно тапнуть по ссылке. При этом для пользователей компьютеров все должно быть по-прежнему, никаких кликов для раскрытия. Я смастерил такое: .show-on-hover a { pointer-events: none; } .show-on-hover:hover a { pointer-events: auto; } Не помогает - при тапе по невидимой ссылке .show-on-hover ловит :hover и когда ссылка ловит клик, на ней уже разрешены pointer-events. Это реально решить чистым CSS?

То, как мне нужно - чтобы button работал как span, а не наоборот В этом и суть. -webkit-appearance: button превращает span в неявный inline-block, но если применить -webkit-appearance: none к button, не произойдет ничего! Это просто шикарно. Удивительная история: button по новым стандартам разработчик обязан использовать для активации любой интерактивности, а стилизовать button нельзя. Классно, супер.

Есть span. Если спану задать padding, он вывалится за поля родителя. Если button задать padding, display: inline; border: 0, то за поля родителя кнопка все равно вылезать не хочет. Почему? Демо - https://jsfiddle.net/hmev9p1r/

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

Так. Теперь оставьте текста столько, чтобы картинка распирала блок по высоте.

Я благодарен вам за помощь, но вы не понимаете поставленной задачи. Если отредактировать две ваших последних картинки, то должно быть так (красной линией отмечены границы поля): Попробуйте сверстать это в режиме IE7, используя только div и вложенные в него в любом порядке p и img и любой css-код. Любых других подпорочных и распорочных блоков в html-коде быть не должно, иначе бы я просто встраивал класс .fixer из первого сообщения на стороне сервера, а не яваскриптом.

То, что мне нужно получить в итоге - картинку, прибитую к левому верхнему углу без полей вообще, и текст, который отстоит от краев контейнера на 1em и обтекает картинку. Вот так и вот так (все хорошо в ИЕ8): Вот что я получаю в ИЕ7: В вашем примере, как видно, нижнее поле съедается, но даже если починить его с помощью clear:left, то останется точно такое же поле при небольшом тексте, которого нет в ИЕ8: Поэтому ваш пример не помогает, никак, либо я чего-то не понимаю.

Отступ снизу никуда не девается, и в случае вложенного флоата инспектор показывает даже очень забавные картинки. Для сравнения - в режиме IE8 все адекватно.

Мне нужно, чтобы текст обтекал картинку, если его много.

Обеспечиваю тут поддержку IE7 и не могу найти правильных слов для гугла. Примеры типа "добавьте плавающему элементу display: inline либо zoom: 1" не работают. Есть такой код: <div> <img src="http://placekitten.com/200/200?image=6" /> <p>Текст</p> </div> И к нему CSS div { overflow-y: hidden; } img { float: left; } p { margin: 1em; } Если запустить это в любом ИЕ <= 7, у img появится margin-bottom от подследнего вложенного элемента. В IE >= 8 такого бага нет. Смастерил на коленке фикс: .fix { zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("div") ).className="fixer" ); } .fixer { width: 0; height: 0; } Фикс оказался совершенно хрустальным: после первой JS-ошибки экспрешены не работают, а ошибки, увы, есть. Есть способ как-то починить это без экспрешенов? Демо: http://pskovich.ru/garbage/iebug.html (в иешных средствах разработчика выбрать режим IE7).

SelenIT, отлично, именно то, что мне нужно, спасибо! Для сносного результата достаточно поиграть с левыми-правыми padding и margin. https://jsfiddle.net/94br7sed/1/ Очередные грабли. Парсер позволяет получить на выходе пустой <i></i>. Чтобы его не было видно, добавил i:empty { padding: 0; margin: auto; }. Чтобы при вложенных <i> не множились поля, добавил i > i { padding-left: 0; padding-right: 0; margin: auto; }. А вот на <i> с пустым дитём (<i><i></i></i>) ни одно правило не сработает, будет белая палочка https://jsfiddle.net/94br7sed/3/ Всё, решения на CSS нет?

Никаких скриптов, должен быть чистый CSS.

Есть блок, внутри которого текст, размечаемый юзером. У тега <i> задан цвет фона, padding, background-color. Сказка кончается, когда юзер в сообщении делает, например, [ i ]та[ /i ][ i ]к[ /i ]. В итоге у нас слово, порванное посередине отступом и border-radius. Нормализовать код на стороне сервера нельзя, только css, только хардкор. Я изрядно поломал голову. Нужно, если у элемента <i> есть непосредственный сосед <i> - без любых нод между ними - соседу обрезать padding и border-radius слева, а элементу - справа. При помощи вспомогательного <span>, :first-of-type, :last-of-type и селектора-плюсика я нагородил что-то похожее на правду: https://jsfiddle.net/qqhwcy79/ Однако, все ломается, если между элементами поставить простой текст. Для плюсика сосед через textNode - тоже сосед. https://jsfiddle.net/qqhwcy79/2/ Ну и наконец, никакой обертки из <span> в реальной жизни у меня не будет. В реальной жизни верстка будет такой https://jsfiddle.net/qqhwcy79/3/ Как это сверстать, чтобы схлопнуть два элемента, если они непосредственные соседи?

Указав 20%, вы жестко засунули 5 блоков на строку. А вы предполагаете, что строк всегда две Блоков может быть любое количество. Ширина блоков одинаковая, за исключением последней строки, определяется шириной самого широкого блока (а его ширина определяется контентом). Контейнер любой ширины. Количество строк и столбцов неизвестно. Высота строк может быть разной. Похоже, без хардкорной яваскриптовой обвязки я тут не обойдусь.

День добрый. Есть контейнер, в контейнере блоки. Блоков может быть любое количество. Контейнер может быть любой ширины. Следовательно, количество строк и столбцов заранее неизвестно. Задача: расположить блоки в контейнере так, чтобы их всегда было одинаковое количество на каждой строке. Если в последней строке не хватает одного-двух блоков, то оставшиеся блоки занимают всю строку. Два дня курю как Flexbox, так и гриды, и не вижу решения. Флексы могут оставить на последней строке один элемент, что ужасно некрасиво. Гриды тоже, плюс они его не растягивают. Решения нет, или я его не вижу? Картинка для наглядности.

Есть код <select> <option value="1">One</option> <option value="2">Two</option> </select> <input type="text" name="unnamed" /> Возможно ли в 2017 году сделать, чтобы input был виден только при выбранном <option value="2">, исключительно с помощью CSS? Трюк с чекбоксом не выходит - <label for=""> в выпадающем списке браузеры (тестил в FF) игнорируют.

Спасибо!

Здравствуйте. Такая проблема - не понимаю, как сверстать такой макет: <div class="parent"> <div class="first">Lorem ipsum blah blah blah</div> <div class="second">Something</div></div><div class="parent"> <div class="first">Lorem ipsum blah blah blah</div></div>Задача: при наличии .second у .first должен исчезать margin-bottom. .second может не быть, при его отсутствии first должен корректно распирать родителя. Вот как это должно выглядеть: https://jsfiddle.net/ntanwrks/5/ Возможно ли это сделать, не добавляя лишний класс div.first, который будет просто сигнализировать, что у тебя есть сосед?

Это .clear:after { content: ""; display: block; clear: both; } ? Но ведь это же жуткий костыль, и кроме того - у меня сайт для мобильных устройств, с :after могут быть проблемы.

Как он может не понадобиться, если мне нужно растягивать блок плавающим элементом?