Как удалить границу с элементов в последней строке?

Мой макет примерно такой (я набираю упрощенную версию со встроенными стилями вместо классов)

.qa {
  border-bottom: 1px solid #ccc;
}

<div style = "display: flex; flex-wrap: wrap; flex-direction: row">
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>

Это в основном делает что-то вроде этого:

Как удалить границу с элементов в последней строке?

Мои вопросы:

Как избавиться от границы в последней строке?

Я думаю, что n-последний ребенок сможет вам помочь css-tricks.com/almanac/selectors/n/nth-last-child

— 02.04.2019 20:05

Да, я думал в том же духе, но это нацелено только на нижний правый div. Мне нужно, чтобы он предназначался для обоих последних строк div

— 02.04.2019 20:09

Просто добавьте: .qa:nth-last-child(-n+2) { border: 0; }

— 02.04.2019 20:28

@bea: твой ответ правильный! Поместите это как ответ, и вы получите голосование

— 02.04.2019 20:55

html css flexbox css-selectors

02.04.2019 20:01

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

15

4

5 209

7

Перейти к ответу Данный вопрос помечен как решенный

Ответы 7

Не думайте об этом как border-bottom.

Думайте об этом как border-top и исключите первые два элемента.

Итак, вместо этого:

.qa { border-bottom: 1px solid #ccc; }

Попробуй это:

.qa + .qa + .qa { border-top: 1px solid #ccc; }

.qa + .qa + .qa {
  border-top: 1px solid #ccc;
}

<div style = "display: flex; flex-wrap: wrap; flex-direction: row">
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>

комбинатор следующего брата (+) нацелен на элемент, которому непосредственно предшествует другой элемент, и оба они имеют одного и того же родителя.

Таким образом, .qa + .qa будет ориентироваться только на .qa элементы, которым предшествует один .qa элемент.

.qa + .qa + .qa нацелен только на .qa элементы, которым предшествуют два элемента .qa.

В качестве альтернативы вы можете попробовать следующее:

.qa:nth-child(n + 3) { border-top: 1px solid #ccc; }

.qa:nth-child(n + 3) {
  border-top: 1px solid #ccc;
}

<div style = "display: flex; flex-wrap: wrap; flex-direction: row">
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>


</div>

Ваше первое решение абсолютно нечитаемо. Ваш второй вариант мне нравится.

— 02.04.2019 21:06

@ Raz0rwire, что ты не понимаешь?

— 02.04.2019 21:07

@Micheal_B Понимание этого сейчас не является проблемой, просмотр кода через 6 месяцев может вызвать некоторую головную боль. Может быть, я немного драматизировал..

— 02.04.2019 21:11

02.04.2019 20:47

Если вы можете добавить псевдоэлемент :after в родительский контейнер .qa (убедитесь, что ваш родительский контейнер установлен на position: relative; или position: absolute;)

Css для родительского элемента .qa

{
    content: "";
    position: relative;
    bottom: 0;
    left:0;
    right:0;
    height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width)  */
    background: #fff; /* match this with your parent element background colour*/
}

02.04.2019 20:47

Ответ принят как подходящий

Вы можете добавить отрицательное нижнее поле к своим элементам, а затем скрыть переполнение. Это скроет нежелательные границы.

.qa {
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px; /*to rectify the bottom margin, we can also consider padding-bottom*/
  
  /*irrelevant styles*/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 40%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;
}

<div class = "wrapper">
  <div class = "qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
  <div class = "qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
  <div class = "qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
</div>

Этот трюк должен работать, даже если количество элементов в строке отличается от 2:

.qa {
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px;
  
  
  /*irrelevant styles*/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 20%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;
}

<div class = "wrapper">
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
</div>

Он также будет работать с адаптивным макетом, где количество столбцов может меняться на маленьких экранах:

.qa {
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px;
  
  
  /*irrelevant styles*/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 20%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;
}

@media all and (max-width:800px) {
  .qa {
    flex:1 1 30%;
  }
}

@media all and (max-width:400px) {
  .qa {
    flex:1 1 40%;
  }
}

<div class = "wrapper">
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" >
    <div>Question</div>
    <div>Answer<br> answer</div>
  </div>
</div>

Это отличное нестандартное мышление! и он охватывает как гибкие строки, так и столбцы. Вот почему я люблю ТАКОЕ, ты так многому учишься! Спасибо

— 02.04.2019 21:55

@supersan да, именно так;) он будет охватывать все различные конфигурации и, что более важно, адаптивную часть, поскольку я уверен, что ваш макет изменится на один столбец, например, на маленьких экранах.

— 02.04.2019 22:19

02.04.2019 21:15

1: Используйте другой класс CSS

Мы можем создать еще один класс CSS, который удалит любой стиль из существующего элемента.

.no-border {
  border-bottom: none;
}

Затем добавьте этот класс в элемент html, например.

  <div class = "qa no-border" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>

2: Используйте псевдоселектор CSS


.qa:last-child {
  border-bottom: none;
}

.qa:nth-last-child(2) {
    border-bottom: none;
}

они называются псевдоклассами (developer.mozilla.org/fr/docs/Web/CSS/Псевдоклассы)

— 02.04.2019 21:40

никогда не понимал, что это всегда будет последний и предпоследний элемент. макет делает его похожим на 3-й элемент и 6-й элемент. Спасибо

— 02.04.2019 21:48

02.04.2019 21:34

судя по вашему макету, пункты пронумерованы:

  [1]  [2]
  [3]  [4]
  [5]  [6]

теперь вы можете:

удалить нижнюю границу из 5-го и 6-го элементов

.qa {
  border-bottom: 1px solid #ccc;
}

.qa:nth-of-type(5),
.qa:nth-of-type(6) {
  border-bottom: none;
}

добавить border-bottom к 1-4 элементам:

.qa:nth-of-type(n+5) {
  border-bottom: 1px solid #ccc;
}

сделайте аналогичную математику, но для добавления border-top

вы также можете изменить направление изгиба, чтобы сделать его более «разумным», но также требует фиксированной высоты (необходимо для переноса, см. здесь):

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

который нумерует элементы в другой ориентации:

  [1]  [4]
  [2]  [5]
  [3]  [6]

теперь вы удаляете нижнюю границу каждого третьего элемента:

.qa {
  border-bottom: 1px solid #ccc;
}

.qa:nth-of-type(3n) {
  border-bottom: none;
}

есть и более сложные исправления. например, вы можете группировать элементы в строки и применять границы к селекторам на основе строк. Это будет ближе всего к тому, что вы действительно планировали в первую очередь:

.row .qa {
  border-bottom: 1px solid #ccc;
}

.row:last-of-type .qa {
  border-bottom: none;
}

02.04.2019 21:43

Вы можете использовать border-top и удалить первые два с помощью селектора CSS :nth-child. Так:

.qa {
  border-top: 1px solid #ccc;
}

.qa:nth-child(-n+2) {
  border-top: none;
}

<div style = "display: flex; flex-wrap: wrap; flex-direction: row">
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>

02.04.2019 21:45

Мне не нравится добавлять правило, когда вы знаете, что немедленно его перезапишете, поэтому вот немного другая версия ответа aridlehoover только с одним правилом CSS.

.qa:not(:nth-child(-n+2)) {
  border-top: 1px solid #ccc;
}

<div style = "display: flex; flex-wrap: wrap; flex-direction: row">
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class = "qa" style = "width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>

02.04.2019 23:05

Другие вопросы по теме

Проблема: Создание кнопки на калькуляторе в HTML/CSS (только дизайн)

Выровнять изображение по центру в div

Плагин блога OCtoberCMS Rainlab

Значок увеличивает высоту панели навигации

CSS3 Animation — Плавная бесконечная анимация

Почему мой `` иногда работает, а другие нет?

Измените ширину макета мозаики на 50% / 50%

Почему сайт позволяет мне прокручивать вправо?

Проблема с мобильным устройством Android (100vh и исправлена ошибка нижнего колонтитула)

Проблема со слайд-шоу в javascript с использованием файла json

Похожие вопросы

Проблема: Создание кнопки на калькуляторе в HTML/CSS (только дизайн)

Выровнять изображение по центру в div

Как добавить элементы во вложенный массив в JavaScript

RemoveEventListener() не работает для события, добавленного в файл HTML5

Отправка параметров в функцию HTTPPOST в действии формы для перетаскивания страницы — MVC Razor C#

Не удается полностью просмотреть веб-страницу при загрузке через URL-адрес Azure

Как повторять определенные столбцы базы данных, используя цикл while с 3 разными таблицами

REGEX, где тег img не имеет alt

CSS3 Animation — Плавная бесконечная анимация

Найти элемент (с переменной xpath) в HTML-коде с использованием селена Python