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 Evsey
      Доброго дня всем матерым верстальщикам.
      Есть задача сделать табличку графика на сайт. Технологии - понятно, что html и css. Табличка не большая, но с особенностями.
      А именно, в табличке есть группы объединенных ячеек, при чем не только внутри строк, но и между строками (объединяется несколько строк). Табличку прикрепил.
      Каркас table tr td без объединения ячеек могу сделать, но нужно объединить.
      Как правильнее всего сделать такое объединение? Было бы классно, чтобы ответ был сразу с примерами.

    • By AlexGreat
      Здравствуйте ! Имеется принципиальный вопрос о выравнивании внутри блока шрифтовой иконки . Вопрос трудно объяснить с помощью текста, поэтому прикрепляю видеовопрос для наглядности - (видео чуть более минуты). 
      https://drive.google.com/open?id=1zHWLnroXsaO5TocvUt07Wv6DHauZdBqJ
      Заранее спасибо за ответ! 
    • By Константин(Mushr00m)
      Здравствуйте уважаемы знатоки.
      Заканчиваю верстку галереи, но возникла пара неприятных моментов.
      Первый. Это проблема вертикального позиционирования "плюса" на оверлее элемента галереи.
      На контейнере с плюсом у меня простые правила:
      position: absolute; top: 42%; left: 41%; , на скрине видно, что на верхнем элементе все выглядит как нужно, но у нижнего плюс расположен вертикально не по центру. У остальных элементов галереи такая же ситуация.
      Конечно есть вариант создать для каждого размера изображения свой класс, и прописать там индивидуальные координаты, но для начала решил спросить у ведующих. Какой универсальный вариант решения данной задачи? Потому-что всех размеров не предусмотришь чтобы для всех создавать классы.
       
      И вторая проблема. Это непонятный нижний отступ (помечен стрелочками) от изображения до края блока, в котором лежит изображение. Блоку я ни ширину, ни высоту не задавал, вот его правила:
      margin-bottom: 29px; display: inline-block; position: relative; , у изображений вообще никаких правил, это их исходные размеры. Но отступ почему-то имеется и так у каждого элемента галереи.
       
      Заранее спасибо за помощь.

  • Member Statistics

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

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Создали большой гибкий сайт на тематику "Продажа лекарств от Гепатита" Сделано: - С нуля разработана концепция и структура сайта;
      - Разработан стильный и современный дизайн;
      - Качественная верстка и программирование сайта (быстрая загрузка, чистый, валидный код);
      - Натянули на Wordpress;
      - Подобрали хостинг и домен для клиента, установили и настроили сайт.
      - бонусом предоставили рекомендации по оптимизации и раскрутке сайта от нашего СЕОшника Клиент получил гибкую платформу, которая максимально удобная как для администратора, так и для покупателей сайта.
      Наполнять сайт текстами клиент предпочел сам.
      Сделали для клиента текстовую, а также видео инструкцию по управлению сайтом:
      https://www.youtube.com/watch?v=PREmX06KayQ
      https://www.youtube.com/watch?v=Kbh4CW4pui4 Ссылка на сайт http://sofosbuvir-daklatasvir.ru/ Срок изготовления сайта - 1 месяц. Если вам нужен качественно представить свою услугу, товары или компанию пишите по контактам ниже, сделаем вам крутой веб-ресурс, будь то Landing Page, Сайт многостраничник, Интернет-магазин, группа в соц сетях. 
      По невысокой цене и разумные сроки Контакты: Телеграм: @Nikker
      Скайп: smo_perviy
      E-Mail: Golllandec@gmail.com    
    • Внимание - Акция - от AlfaHoster!!

      Представляем наш новый тариф - Бесплатный Хостинг!
      Параметры тарифа: SSD -150Mb, RAM - 128Mb, MySQL 5.5.6 -2
      Все подробности параметров тарифа смотрите на страничке сайта хостинг-компании AlfaHoster
      Теперь практически любой может воспользоваться услугами хостинга - бесплатно.
      Поспешите воспользоваться моментом - и протестировать наши услуги, акция ограничена во времени!
      _________________
      AlfaHoster.com - надежный и недорогой хостинг для сайтов
    • Не соглашусь с Вами. Вот вам 2 очень простых примера. LESS: @color: red; a { color: @color; } @color: blue; Итог: a { color: blue; }   SASS: $color: red; a { color: $color; } $color: blue; Итог: a { color: red; } Разница в обоих результатах совершенно разная. Этим успешно можно пользоваться. Вариант с LESS шикарно решает задачи, когда требуется "сквозная" конфигурация проекта (внесение изменений в конфигурацию на любом этапе выполнения). Вариант с SASS потребует от разработчика в начале определять переменные, и лишь потом ими пользоваться, не имея возможности влиять на их значение в любой момент выполнения.
  • Popular Contributors