css- все статьи тега ➜ страница 20


Как правильно выровнять элемент flex?

есть ли более flexbox-ish способ выровнять "контакт" справа, чем использовать position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class= ...

Как изменить цвет изображения SVG с помощью CSS (jQuery SVG image replacement)?

это самостоятельный вопрос и ответ на удобный кусок кода, который я придумал. В настоящее время нет простого способа встроить изображение SVG, а затем получить доступ к элементам SVG через CSS. Существуют различные методы использования фреймворков JS SVG, но они слишком сложны, если все, что вы делаете, - это создание простого значка с состоянием опрокидывания. Итак, вот что я придумал, и я думаю, что это самый простой способ использовать файлы SVG на веб-сайте. Он берет свою концепцию из ранн ...

Как применить фильтр размытия CSS 3 к фоновому изображению

у меня есть файл JPEG, который я использую в качестве фонового изображения для страницы поиска, и я использую CSS, чтобы установить его, потому что я работаю в костяк.js контекстах: background-image: url("whatever.jpg"); Я хочу применить фильтр размытия CSS 3 только в фоновом режиме, но я не уверен, как стиль только один элемент. Если я попытаюсь: -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); под background-image в моем C ...

Адаптивный центр выравнивания изображений bootstrap 3

Я делаю каталог с помощью Bootstrap 3. При отображении на планшетах изображения продукта выглядят некрасиво из-за их небольшого размера (500x500) и ширины 767 пикселей в браузере. Я хочу поместить изображение в центр экрана, но почему-то не могу. Кто будет помогать решать проблему? ...

Bootstrap - как настроить фиксированную ширину?

простая схема: <tr class="something"> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> мне нужно установить фиксированную ширину для <td>. Я пробовал: tr.something { td { width: 90px; } } и td.something { width: 90px; } на <td class="something">B</td> и даже <td style="width: 90px;">B</td> но ширина <td> все то же самое. ...

Что такое таблица стилей агента пользователя

Я работаю на веб-странице в Google Chrome. Он отображается правильно со следующими стилями. table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; } важно отметить, что я не определял эти стили. По инструментам разработчика Chrome, он говорит таблица стилей агента пользователя вместо имени файла CSS. Теперь, если я отправляю форму и возникает ошибка проверки, я получаю следующую таблицу стилей: table { white-space: normal; line-he ...

CSS заставить изображение изменить размер и сохранить соотношение сторон

Я работаю с изображениями, и я столкнулся с проблемой соотношения сторон. <img src="big_image.jpg" width="900" height="600" alt="" /> Как видите, height и width уже указаны. Я добавил правило CSS для изображений: img { max-width:500px; } но big_image.jpg появляется width=500 и height=600. Как я могу установить изображения для изменения размера, сохраняя при этом их соотношение сторон. ...

Высота равна динамической ширине (CSS fluid layout) [дубликат]

этот вопрос уже есть ответ здесь: Поддерживайте соотношение сторон div с помощью CSS 19 ответов можно ли установить ту же высоту, что и ширина (соотношение 1:1)? пример +----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ CSS div { width: 80%; height: same-as-width } ...

Запросы css media: max-width или max-height

при написании медиа-запроса CSS, есть ли способ указать несколько условий с логикой "или"? Я пытаюсь сделать что-то вроде этого: /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) { ... } ...

Изображение внутри div имеет дополнительное пространство под изображением

Почему следующий код высота div больше, чем высота img ? Под изображением есть пробел, но это не кажется заполнением/краем. что такое зазор или дополнительное пространство под изображением? #wrapper { border: 1px solid red; width:200px; } img { width:200px; } <div id="wrapper"> <img src="http://i.imgur.com/RECDV24.jpg" /> </div> ...

Сброс / удаление стилей CSS только для элемента

Я уверен, что это должно было быть упомянуто / спрошено раньше, но искали возраст без удачи, моя терминология должна быть неправильной! Я смутно помню твит, который я видел некоторое время назад, который предположил, что существует правило css, которое удалит любые стили, ранее установленные в таблице стилей для определенного элемента. хороший пример использования может быть в мобильном первом сайте RWD, где большая часть стиля используется для определенного элемента в представления с малым эк ...

Только печать?

как напечатать указанный div (без ручного отключения всего остального контента на странице)? Я хочу избежать нового диалогового окна предварительного просмотра, поэтому создание нового окна с этим контентом не полезно. страница содержит несколько таблиц, одна из них содержит div, который я хочу распечатать - таблица стилизована под визуальные стили для интернета, которые не должны отображаться в печати. ...

Каков самый простой способ отключить / включить кнопки и ссылки (jQuery + Bootstrap)

иногда я использую якоря в стиле кнопок, а иногда я просто использую кнопки. Я хочу отключить определенные клики-вещи, чтобы: Они выглядят инвалидов они перестают щелкать Как я могу это сделать? ...

CSS фиксированная ширина в промежутке

в ненумерованный список: <li><span></span> The lazy dog.</li> <li><span>AND</span> The lazy cat.</li> <li><span>OR</span> The active goldfish.</li> добавление атрибута класса или стиля разрешено, но заполнение текста и добавление или изменение тегов не допускается. страница рендеринга с курьером новым. цель состоит в том, чтобы текст после span выстроились. The lazy dog. AND The lazy cat. OR The active goldfish. ...

Как выровнять 3 дива (левый/центральный/правый) внутри другого div?

Я хочу, чтобы 3 дива выровнены внутри контейнера div, что-то вроде этого: [[LEFT] [CENTER] [RIGHT]] контейнер div имеет ширину 100% (без заданной ширины), а центральный div должен оставаться в центре после изменения размера контейнера. Я: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} но это будет: [[LEFT] [CENTER] ] [RIGHT] какие-либо советы? ...

Запретить прокрутку тела, но разрешить прокрутку наложения

Я искал решение типа "лайтбокс", которое позволяет это, но еще не нашел его (пожалуйста, предложите, если вы знаете о нем). поведение, которое я пытаюсь воссоздать, похоже на то, что вы увидите в Pinterest при нажатии на изображение. Наложение прокручивается (как и в целом наложение перемещается вверх, как страница на странице) но тело за оверлея исправлена. Я попытался создать это с помощью только CSS (т. е. a div оверлея поверх всей страницы и тела с overflow: hidden), но это не мешает div ...

Как повлиять на другие элементы при наведении div

Я думаю, что это очень простой вопрос, но я не уверен, как это можно сделать. то, что я хочу сделать, это, когда некий div завис, это повлияет на свойства другого div. например,этот простой пример при наведении курсора мыши #cube изменения background-color но то, что я хочу, это когда я нависаю над #container,есть. div { outline: 1px solid red; } #container { width: 200px; height: 30px; } #cube { width: 30px; height: 100%; background-color: red; } #cube:hover { ...

Добавить ушко Glyphicon в поле ввода

Как я могу добавить glyphicon в поле ввода текста типа? Например, я хочу иметь 'icon-user' в вводе имени пользователя, что-то вроде этого: ...

CSS размер изображения, как заполнить, а не растягивать?

У меня есть изображение, и я хочу установить его определенную ширину и высоту (в пикселях) но если я устанавливаю ширину и высоту с помощью css (width:150px; height:100px), изображение будет растянуто, и это может быть некрасиво. Как заполнить изображения определенного размера с помощью CSS, и не растягивая это? пример заливки и растягивания изображения: Оригинальное Изображение: растягивается Изображение: Заполнил Изображения: обратите внимание, что в Примере с заполненным изображ ...

Таблица HTML с шириной 100%, с вертикальной прокруткой внутри tbody

как я могу установить для <table> 100% ширина и положить только внутри <tbody> вертикальная прокрутка для некоторой высоты? table { width: 100%; display:block; } thead { display: inline-block; width: 100%; height: 20px; } tbody { height: 200px; display: inline-block; width: 100%; overflow: auto; } <table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <t ...