Geyan
-
Posts
7 -
Joined
-
Last visited
Geyan's Achievements
Explorer (1/14)
0
Reputation
-
вот так и надо - сделать ....так как кажется а last-child last-of-child и т д я и сам умею
-
это не то - почитайте описание внимательно - написано в СТРОКЕ
-
Не совпадает расчетная ширина элемента и фактическая
Geyan replied to Tohin's question in HTML Coding
Если к примеру использовать не inline-block а использовать flexbox то ситуация меняется вот дэмо : http://jsfiddle.net/haq3k2b4/ -
Разумеется это flexbox с переносом Количество элементов не известно На данный момент крайние это : 2 4 8 10 Если добавить то и схема изменится Есть ли возможность добраться до каждого последнего элемента строки ? https://codepen.io/topicstarter/pen/bOQyKm вот здесь весь геморой Забыл написать что добраться надо на css до последнего div в строке ...если это возможно конечно <div class="container"> <div class="c1">1</div> <div class="c2">2</div> <div class="c3">3</div> <div class="c4">4</div> <div class="c5">5</div> <div class="c6">6</div> <div class="c7">7</div> <div class="c8">8</div> <div class="c9">9</div> <div class="c10">10</div> <!-- <div class="c11">11</div> <div class="c12">12</div> <div class="c13">12</div> <div class="c14">12</div> <div class="c15">12</div> <div class="c16">12</div> --> </div> .container { display: flex; flex-wrap: wrap; width: 500px; border:1px solid; } .container div { background-color: grey; margin: 3px; padding: 3px; font-weight: bold; color: white; display:inline-block; } .c1{width: 100px;} .c2{width: 130px;} .c3{width: 300px;} .c4{width: 100px;} .c5{width: 100px;} .c6{width: 100px;} .c7{width: 100px;} .c8{width: 150px;} .c9{width: 200px;} .c10{width:100px;} .c11{width:160px;} .c12{width:220px;} .c13{width:150px;} .c14{width:200px;} .c15{width:100px;} .c16{width:190px;}
-
это в смысле svg ?
-
Как реализовать такое ?
-
Как добиться transition в IE 11 ? Делаю greyscale но работает либо greyscale либо транситион в IE 11 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=9"> <meta http-equiv="X-UA-Compatible" content="IE=10"> <meta http-equiv="X-UA-Compatible" content="IE=11"> <style type="text/css"> img{ display:block; max-width:300px !important; transition:transform .4s; -ms-transition:transform .4s; -webkit-transition:.4s; -moz-transition:.4s; margin:50px auto; } .images:hover{ transform:scale(1.5); -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -ms-transform:scale(1.5); --transform:scale(1.5); -khtml-transform:scale(1.5); } .grey{ -ms-filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); filter: grayscale(1); -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: url('url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'> <feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");'); filter: gray; } </style> </head> <body> <img src="http://throwbacksoundtrack.org/wp-content/uploads/2012/10/wallpaper-1162140.jpg" alt="" class="images grey"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript"> $('.images').hover(function(){ $(this ).toggleClass( 'grey') }); </script> </body> </html> indexgrey.html