CSS добавляет жирную «рамку» вокруг IMG без изменения позиционирования IMG

0

У меня есть строки эскизов в <div> с small margin/border/padding set. Я хотел бы добавить класс 'focus' чтобы выделить один миниатюру на странице во время перехода CSS, то есть 'div.thumb.focus'

Есть ли какой-нибудь простой CSS-трюк для обертывания рамки вокруг 'div.thumb' БЕЗ повторного позиционирования div.thumb на странице?

Все div.thumbs абсолютно расположены внутри контейнера. И я хочу, чтобы фрейм был THICKER, чем margin/padding между div.thumb. Он может жить на более высоком z-index и частично покрывать соседние большие пальцы, пока события щелчка читают div.thumb.focus. Приемлемо простое решение JQuery.

 // using LESS syntax
.container {
   position: relative;

  .thumb {
    &.focus {
       <need help here>
    }
    top: @top;
    left: @left;
    position: absolute;
    margin: @margin;
    padding: @padding;

    img {
      width: @width;
      height: @height;
    }
   }

 }
  • 0
    Попробуйте box-shadow: inset 0 0 0 5px red
  • 0
    возможный дубликат Как использовать границу с Bootstrap
Показать ещё 1 комментарий

2 ответа

0
Лучший ответ

Несколько соображений приходят на ум (а не Bootstrap):

Использование лучшей модели коробки, но это может повлиять на ваше дополнение:

box-sizing: border-box
border: 10px solid red

Или используя тень твердой вставки, которая будет выглядеть как граница:

box-shadow: inset 0 0 0 10px red

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

outline: 10px solid red
  • 0
    Контур это то, что я ищу. Я могу минимизировать расстояние между миниатюрами и при этом иметь хорошо видимую «рамку». Дополнительный кредит. В случае миниатюры на краю, есть ли простой способ для контура расширить ВНЕШНИЙ контейнер?
  • 0
    понял это. использованный перелив: виден на контейнере
0

Теперь я не слишком хорошо знаком с LESS, поэтому я только что сделал это в обычном CSS.

Есть несколько вариантов, которые вы могли бы выбрать.

Добавить отрицательную маржу

.thumb.focus{
    margin-top: -4px;
    margin-left: -4px;
    border: 4px solid blue;
}

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

Добавить тень

.thumb.focus{
    box-shadow: 0 0 0 4px blue; //use inset if you want it inside the thumb
}

Это может работать хорошо, но не если вы хотите, чтобы несколько цветов/толщин с некоторых сторон.

Использовать размер окна

.thumb.focus{    
    box-sizing: border-box;
    border: 4px solid blue;
}

Основная проблема с этим - поддержка браузера.

Использовать контур

.thumb.focus{
    outline: 4px solid blue;
}

У меня такая же проблема, как и явная тень.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню