Jump to content

Geyan

Newbie
  • Posts

    7
  • Joined

  • Last visited

Everything posted by Geyan

  1. вот так и надо - сделать ....так как кажется а last-child last-of-child и т д я и сам умею
  2. это не то - почитайте описание внимательно - написано в СТРОКЕ
  3. Если к примеру использовать не inline-block а использовать flexbox то ситуация меняется вот дэмо : http://jsfiddle.net/haq3k2b4/
  4. Разумеется это 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;}
  5. Как добиться 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
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy