Po kliknięciu dodaję obramowanie 1px do div, więc rozmiar Div wzrasta o 2px X 2px. Nie chcę zwiększać rozmiaru div. Czy można to zrobić w prosty sposób?
Brudne szczegółowe wyjaśnienie
Właściwie dodam DIV z float: left (ten sam rozmiar, jak ikony) do elementu div-kontenera, więc wszystkie układają się jeden po drugim, a kiedy (szerokość elementu div kontenera wynosi 300px), nie ma spacji w szerokości, więc podrzędne DIV pojawia się w następnym wierszu, więc jest podobny do katalogu, ale ze względu na obramowanie zwiększa się tylko wybrany rozmiar DIV, DIV pod wybranym DIV przechodzi w prawo i tworzy puste miejsce poniżej wybranego DIV.
EDYCJA:
Zmniejszanie wysokości / szerokości po zaznaczeniu, ale jak je zwiększyć. Używam frameworka innej firmy, więc nie ma zdarzenia, gdy DIV przegra wybór.
Odpowiedzi:
Właściwość border css zwiększy rozmiar „zewnętrzny” wszystkich elementów, z wyjątkiem tds w tabelach. Można uzyskać wizualne pomysł, jak to działa w Firebug ( przerwane ), w zakładce> Układ formacie HTML.
Na przykład element div o szerokości i wysokości 10 pikseli oraz obramowaniu 1 piksela będzie miał zewnętrzną szerokość i wysokość 12 pikseli.
W twoim przypadku, aby wyglądało na to, że obramowanie znajduje się „wewnątrz” elementu div, w wybranej klasie CSS możesz zmniejszyć szerokość i wysokość elementu przez podwojenie rozmiaru obramowania lub możesz zrobić to samo dla wyściółka elementów.
Na przykład:
źródło
outline
lub obramowanie w tym samym kolorze co tło (i zmiana jego koloru na inny po wybraniu) jest bardziej elastyczne.border-color: transparent
Jest to również pomocne w tym scenariuszu. pozwala na ustawienie granic bez zmiany szerokości div
Zaczerpnięte z http://css-tricks.com/box-sizing/
źródło
ustaw na nim obramowanie przed kliknięciem, aby miał ten sam kolor co tło.
Następnie po kliknięciu zmień tylko kolor tła, a szerokość się nie zmieni.
źródło
border-color: transparent
Innym dobrym rozwiązaniem jest użycie
outline
zamiastborder
. Dodaje obramowanie bez wpływu na model pudełka. Działa to w IE8 +, Chrome, Firefox, Opera, Safari.( https://stackoverflow.com/a/8319190/2105930 )
źródło
box-shadow
na innej mojej odpowiedzi na podobne pytanie. Nie ma takiej samej obsługi przeglądarki, ale obecnie jest to mniejszy problem.box-shadow
może również obsługiwać jednostronne obramowanie , idealne rozwiązanie.border-color: transparent
ma lepszą obsługę różnych przeglądarek --- zobacz moją odpowiedź ...Spróbuj zmienić
border
naoutline
:źródło
Korzystając z wielu z tych rozwiązań, uważam, że trik polegający na ustawianiu
border-color: transparent
jest najbardziej elastyczny i szeroko obsługiwany:Dlaczego jest lepiej:
outline
, nadal możesz osobno określić np. Górną i dolną granicęźródło
transparent
to jest potrzeba!Spróbuj tego
źródło
Zwykle używam dopełnienia, aby rozwiązać ten problem. Wypełnienie zostanie dodane, gdy obramowanie zniknie, i usunięte, gdy pojawi się obramowanie. Przykładowy kod:
Wyświetl mój pełny przykładowy kod na JSFiddle: https://jsfiddle.net/3t7vyebt/4/
źródło
Po prostu zmniejsz szerokość i wysokość o dwukrotność border-width
źródło
Możesz zrobić kilka wymyślnych rzeczy z wstawionymi cieniami. Przykład umieszczenia obramowania na dole elementu bez zmiany jego rozmiaru:
źródło
Czasami nie chcesz, aby zmiana dotyczyła wysokości lub szerokości bez jawnego ustawienia. W takim przypadku uważam, że pomocne jest użycie pseudoelementów.
Możesz także zrobić dużo więcej z pseudoelementem, więc jest to całkiem mocny wzorzec.
źródło
width
iheight
oraz dodanie właściwości abottom
ileft
oprócztop
ileft
, z których wszystkie powinny być ustawione na przeciwną szerokość oryginalne obramowanie (w moim przypadku -1px). Świetny hackZwiększając obramowanie, spróbuj zmniejszyć rozmiar marginesu
źródło
Musiałem mieć możliwość „obramowania” dowolnego elementu, dodając klasę i nie wpływając na jej wymiary. Dobrym rozwiązaniem dla mnie było użycie box-shadow. Ale w niektórych przypadkach efekt nie był widoczny ze względu na inne rodzeństwo. Więc połączyłem zarówno typowe box-shadow, jak i inset box-shadow. Rezultatem jest wygląd obramowania bez zmiany jakichkolwiek wymiarów.
Wartości oddzielone przecinkami. Oto prosty przykład:
jsfiddle
Dostosuj się do preferowanego wyglądu i gotowe!
źródło
Możemy również użyć funkcji css calc ()
odejmowanie 2 pikseli dla obramowań
źródło
źródło
Możesz utworzyć element z obramowaniem w tym samym kolorze, co tło, a gdy chcesz, aby obramowanie było widoczne, po prostu zmień jego kolor.
źródło
border-color: transparent
ul li a{border-bottom:2px solid transparent;} ul li a:hover{border-bottom:2px solid red;}
W przypadku, gdy zawartość
div
jest renderowana dynamicznie i chcesz ustawić jej wysokość, możesz użyć prostego triku zoutline
:Przykład tutaj: https://codepen.io/Happysk/pen/zeQzaZ
źródło
Możesz wypróbować wstawkę typu box-shadow
coś takiego: box-shadow: inset 0px -5px 0px 0px #fff
dodaje białą ramkę o rozmiarze 5 pikseli na dole elementu bez zwiększania rozmiaru
źródło