Geyan

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

Рекомендованные сообщения

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

Изменено пользователем Geyan

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

результат.

...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
1 час назад, spdif сказал:

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

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


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

результат.

...

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

Изменено пользователем Geyan

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
29 минут назад, Geyan сказал:

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

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

спрашивали: 

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

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

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

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

    

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
27 минут назад, spdif сказал:

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

спрашивали: 

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

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

 

    

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

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

 

Изменено пользователем Geyan

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
5 часов назад, Geyan сказал:

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

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

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

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

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

        

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: artaka
      Работаю верстальщиком за небольшую плату (100-300руб в зависимости от работы) Связь со мной : 
      VK vk.com/artakagrand
      Telegram @artakagrand
      email fefsert@gmail.com
      Примеры работ:
      http://teslamodelx.epizy.com
      http://teslamodelx.epizy.com/infoblog/index.html
      http://teslamodelx.epizy.com/blog/index.php
    • Автор: ZAMPOREZKE
      Оцените верстку и скажите, что не так.Заранее спасибо.
      https://zamporezke.github.io/
    • Автор: Fich71
      Здравствуйте.
      Есть абсолютно спозиционированный элемент, во всех браузерах при адаптации все ок(хром, фф, ие), но у заказчика на сафари этот элемент немного поехал.
       Вопрос: Можно ли сидя на винде как то протестировать вёрстку в сафари?(в актуальной версии браузера)
      И ещё: что за баг с позиционированием если хром и сафари на одном движке?
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.