Lucián, parte de nuestro staff, nos hizo el favor de crear este escrito ya que domina perfectamente el tema.
Solución:
Puede agregar un margen inferior negativo a sus elementos y luego ocultar el desbordamiento. Esto ocultará los bordes no deseados.
.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;
Question
Answer
Answer
Question
Answer
Question
Answer
Question
Answer
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Answer
Este truco debería funcionar incluso si el número de elementos en una fila es diferente de 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;
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
answer
También funcionará con un diseño receptivo donde el número de columnas puede cambiar en pantallas pequeñas:
.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%;
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
answer
1: usa otra clase de CSS
Podemos crear otra clase CSS que elimine cualquier estilo de un elemento de existencia.
.no-border
border-bottom: none;
Luego agregue esta clase al elemento html, por ejemplo
Question
Answer
2: usa el pseudo selector de CSS
.qa:last-child
border-bottom: none;
.qa:nth-last-child(2)
border-bottom: none;
No lo pienses como border-bottom.
Piense en ello como border-top y excluir los dos primeros elementos.
Entonces en lugar de esto:
.qa border-bottom: 1px solid #ccc;
Prueba esto:
.qa + .qa + .qa border-top: 1px solid #ccc;
.qa + .qa + .qa
border-top: 1px solid #ccc;
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
los combinador del próximo hermano (+) apunta a un elemento que está inmediatamente precedido por otro elemento, y ambos comparten el mismo padre.
Entonces .qa + .qa apuntaría solo .qa elementos que van precedidos de uno .qa elemento.
.qa + .qa + .qa solo objetivos .qa elementos que van precedidos de dos .qa elementos.
Alternativamente, puede probar esto:
.qa:nth-child(n + 3) border-top: 1px solid #ccc;
.qa:nth-child(n + 3)
border-top: 1px solid #ccc;
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Question
Answer
Eres capaz de añadir valor a nuestro contenido asistiendo con tu veteranía en las reseñas.