Geyan

Как добраться до последнего элемента в строке ?

Recommended Posts

Разумеется это 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;}

 

2019-01-13_133643.png

Edited by Geyan

Share this post


Link to post
Share on other sites

Можно через псевдоэлемент обратится к последнему потомку в доме по типу его элемента, 

добавив следующее правило: 

.container div:nth-last-of-type(1) {background: #f00;}

результат.

...

Share this post


Link to post
Share on other sites
1 час назад, spdif сказал:

Можно через псевдоэлемент обратится к последнему потомку в доме по типу его элемента, 

добавив следующее правило: 


.container div:nth-last-of-type(1) {background: #f00;}

результат.

...

это не то - почитайте описание внимательно - написано в СТРОКЕ 

Edited by Geyan

Share this post


Link to post
Share on other sites
29 минут назад, Geyan сказал:

написано в СТРОКЕ

в какой строке? у Вас там суть всего одна строка! 

спрашивали: 

3 часа назад, Geyan сказал:

каждого последнего элемента строки

вот и результат который соответствует запросу!

    а то что на картинке показываете, так это не отдельные  строки, это просто так кажется...

    

Share this post


Link to post
Share on other sites
27 минут назад, spdif сказал:

в какой строке? у Вас там суть всего одна строка! 

спрашивали: 

вот и результат который соответствует запросу!

    а то что на картинке показываете, так это не отдельные  строки, это просто так кажется...

 

    

вот так и надо - сделать ....так как кажется 

а last-child last-of-child и т д я и сам умею 

 

Edited by Geyan

Share this post


Link to post
Share on other sites
5 часов назад, Geyan сказал:

Количество элементов не известно 

        и ширина элементов разная, соответственно количество элементов в этой так называемой строке,

        и в последующих строках тоже, будет разным, и как тогда определить последнего? ведь мы знаем что 

        у нас по сути только один явный последний? подключить нейросеть если только)) 

        По нормальному, это надо сеткой делать  Grid Layout  ...!

        

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Valery Subbotin
      Здравствуйте, подскажите, пожалуйста, в чем может быть проблема: при вертске, блоки текста имеют совсем иные переносы нежели на макете.
      Шрифт, насыщенность(font-weight), размер - все как на макете, но что-то, видимо, все равно не так.


    • By Svenden
      Как слово эквилибриум сдвинуть немного вниз ? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Эквилибриум </title> <link rel="stylesheet" href="/ecomapp/assets/css/style.css"> <meta name="description" content=""/> <meta name="keywords" content=""/> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top"> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8"> <ul class="nav navbar-nav"> {% if not request.get_full_path == '/' %} <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Категории <span class="caret"></span></a> <ul class="dropdown-menu"> {% for category in categories %} <li><a href="{{ category.get_absolute_url }}">{{ category.name }}</a></li> {% endfor %} </ul> </li> {% endif %} </ul> </div> </nav> <!-- Page Content --> <div class="container"> {% block content %} <div class="row"> <div class="col-lg-3"> <p class="lead">Эквилибриум</p> <div class="list-group"> {% for category in categories %} <a href="{{ category.get_absolute_url }}" class="list-group-item">{{ category.name }}</a> {% endfor %} </div> </div> <!-- /.col-lg-3 --> <div class="row"> {% for product in products %} <div class="col-lg-4 col-md-6 mb-4"> <div class="thumbnail"> <img src="{{ product.image.url }}" alt="" style="width:100px; height: 150px;"> <div class="caption"> <h4 class="pull.right">{{ product.price }} руб.</h4> <h5><strong><a href="{{ product.get_absolute_url }}">{{ product.title }}</a></strong></h5> <p>{{ product.description }}</p> </div> </div> </div> {% endfor %} </div> <!-- /.row --> </div> <!-- /.col-lg-9 --> </div> <!-- /.row --> </div> <!-- /.container --> <div class="container"> {% endblock content %} </div> </body> </html> <footer class="py-0 bg-dark"> <div class="container"> <p class="m-145454 text-green">Copyright © Your Website 2019</p> </div> <!-- /.container --> </footer>
    • By Valery Subbotin
      Здравствуйте, подскажите пожалуйста как избавиться от отступов в тексте, чтобы границы блока обтекали текст пиксель в пиксель.
      Все padding-и разумеется убрал, но непонятный зазор между границей блока и текстом все ровно остался.

  • Member Statistics

    46,433
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.