How to remove border from elements in the last row?Targeting flex items on the last rowHow to vertically wrap content with flexbox?Remove border from IFrameHow do you keep parents of floated elements from collapsing?CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?Div width 100% minus fixed amount of pixelsHow can I select an element with multiple classes in jQuery?How to move an element into another element?How do I combine a background-image and CSS3 gradient on the same element?How to remove border (outline) around text/input boxes? (Chrome)How do I remove the space between inline-block elements?Flex-box: Align last row to grid
Why was Sir Cadogan fired?
Why do I get negative height?
Sums of two squares in arithmetic progressions
In the UK, is it possible to get a referendum by a court decision?
Should I tell management that I intend to leave due to bad software development practices?
Car headlights in a world without electricity
How can I deal with my CEO asking me to hire someone with a higher salary than me, a co-founder?
Notepad++ delete until colon for every line with replace all
How to aggregate categorical data in R?
How to prevent "they're falling in love" trope
When handwriting 黄 (huáng; yellow) is it incorrect to have a disconnected 草 (cǎo; grass) radical on top?
Processor speed limited at 0.4 Ghz
How could indestructible materials be used in power generation?
Am I breaking OOP practice with this architecture?
Finding the reason behind the value of the integral.
OP Amp not amplifying audio signal
How exploitable/balanced is this homebrew spell: Spell Permanency?
How to install cross-compiler on Ubuntu 18.04?
How dangerous is XSS
What is the opposite of "eschatology"?
Is this draw by repetition?
What was Prahlada's age when his father was killed?
Rotate ASCII Art by 45 Degrees
Salesman text me from his personal phone
How to remove border from elements in the last row?
Targeting flex items on the last rowHow to vertically wrap content with flexbox?Remove border from IFrameHow do you keep parents of floated elements from collapsing?CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?Div width 100% minus fixed amount of pixelsHow can I select an element with multiple classes in jQuery?How to move an element into another element?How do I combine a background-image and CSS3 gradient on the same element?How to remove border (outline) around text/input boxes? (Chrome)How do I remove the space between inline-block elements?Flex-box: Align last row to grid
7
My layout is something like this (I'm typing a simplified version with inline styles instead of classes)
.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>This basically renders something like this:
My questions is:
How do I get rid of the border in the last row?
html css css3 flexbox css-selectors
edited 15 mins ago
Michael_B
157k50255363
asked 3 hours ago
supersansupersan
1,7871837
add a comment |
7
My layout is something like this (I'm typing a simplified version with inline styles instead of classes)
.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>This basically renders something like this:
My questions is:
How do I get rid of the border in the last row?
html css css3 flexbox css-selectors
edited 15 mins ago
Michael_B
157k50255363
asked 3 hours ago
supersansupersan
1,7871837
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
3 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
3 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
3 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 hours ago
add a comment |
7
7
7
My layout is something like this (I'm typing a simplified version with inline styles instead of classes)
.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>This basically renders something like this:
My questions is:
How do I get rid of the border in the last row?
html css css3 flexbox css-selectors
edited 15 mins ago
Michael_B
157k50255363
asked 3 hours ago
supersansupersan
1,7871837
My layout is something like this (I'm typing a simplified version with inline styles instead of classes)
.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>This basically renders something like this:
My questions is:
How do I get rid of the border in the last row?
.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>.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>html css css3 flexbox css-selectors
html css css3 flexbox css-selectors
edited 15 mins ago
Michael_B
157k50255363
asked 3 hours ago
supersansupersan
1,7871837
edited 15 mins ago
Michael_B
157k50255363
asked 3 hours ago
supersansupersan
1,7871837
edited 15 mins ago
Michael_B
157k50255363
edited 15 mins ago
Michael_B
157k50255363
edited 15 mins ago
Michael_B
157k50255363
157k50255363
asked 3 hours ago
supersansupersan
1,7871837
asked 3 hours ago
supersansupersan
1,7871837
asked 3 hours ago
supersansupersan
1,7871837
1,7871837
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
3 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
3 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
3 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 hours ago
add a comment |
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
3 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
3 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
3 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 hours ago
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
3 hours ago
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
3 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
3 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
3 hours ago
4
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
3 hours ago
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
3 hours ago
2
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 hours ago
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 hours ago
add a comment |
7 Answers
7
active
oldest
votes
3
1: Use Another CSS class
We can create another CSS class which removes any styling form an existence element
.no-border
border-bottom: none;
Then add this class to the html element e.g.
<div class="qa no-border" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
2: Use CSS pseudo selector
.qa:last-child
border-bottom: none;
.qa:nth-last-child(2)
border-bottom: none;
edited 1 hour ago
Temani Afif
81.8k104793
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
1 hour ago
add a comment |
3
judging by your layout, the items are numbered:
[1] [2]
[3] [4]
[5] [6]
now, you can either:
- remove border-bottom from 5th & 6th items
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(5),
.qa:nth-of-type(6)
border-bottom: none;
- add border-bottom to 1st-4th items:
.qa:nth-of-type(n+5)
border-bottom: 1px solid #ccc;
- do similar math but for adding
border-top
you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
which numbers items in a different orientation:
[1] [4]
[2] [5]
[3] [6]
now you reomove border-bottom on every 3rd item:
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(3n)
border-bottom: none;
there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:
.row .qa
border-bottom: 1px solid #ccc;
.row:last-of-type .qa
border-bottom: none;
answered 1 hour ago
zhirzhzhirzh
1,6801723
add a comment |
1
Don't think about it as border-bottom.
Think about it as border-top and exclude the first two elements.
So instead of this:
.qa border-bottom: 1px solid #ccc;
Try this:
.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>The next-sibling combinator (+) targets an element that is immediately preceded by another element, and both share the same parent.
So .qa + .qa would target only .qa elements that are preceded by one .qa element.
.qa + .qa + .qa targets only .qa elements that are preceded by two .qa elements.
Alternatively, you can try this:
.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>answered 2 hours ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
2 hours ago
add a comment |
1
You can add a negative bottom margin to your elements then hide the overflow. This will hide the unwanted borders.
.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>This trick should work even if the number of element in a row is different from 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>It will also work with a reponsive layout where the number of columns can change on small screens:
.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>answered 2 hours ago
Temani AfifTemani Afif
81.8k104793
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
1 hour ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
1 hour ago
add a comment |
0
If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)
Css for .qa parent element
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*/
answered 2 hours ago
vaibhav kumarvaibhav kumar
295
add a comment |
0
You could use border-top and remove the first two with the :nth-child CSS selector. Like this:
.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>answered 1 hour ago
aridlehooveraridlehoover
1,8041615
add a comment |
0
I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.
.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>answered 26 mins ago
GeatGeat
208110
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55480980%2fhow-to-remove-border-from-elements-in-the-last-row%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
1: Use Another CSS class
We can create another CSS class which removes any styling form an existence element
.no-border
border-bottom: none;
Then add this class to the html element e.g.
<div class="qa no-border" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
2: Use CSS pseudo selector
.qa:last-child
border-bottom: none;
.qa:nth-last-child(2)
border-bottom: none;
edited 1 hour ago
Temani Afif
81.8k104793
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
1 hour ago
add a comment |
3
1: Use Another CSS class
We can create another CSS class which removes any styling form an existence element
.no-border
border-bottom: none;
Then add this class to the html element e.g.
<div class="qa no-border" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
2: Use CSS pseudo selector
.qa:last-child
border-bottom: none;
.qa:nth-last-child(2)
border-bottom: none;
edited 1 hour ago
Temani Afif
81.8k104793
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
1 hour ago
add a comment |
3
3
3
1: Use Another CSS class
We can create another CSS class which removes any styling form an existence element
.no-border
border-bottom: none;
Then add this class to the html element e.g.
<div class="qa no-border" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
2: Use CSS pseudo selector
.qa:last-child
border-bottom: none;
.qa:nth-last-child(2)
border-bottom: none;
edited 1 hour ago
Temani Afif
81.8k104793
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
1: Use Another CSS class
We can create another CSS class which removes any styling form an existence element
.no-border
border-bottom: none;
Then add this class to the html element e.g.
<div class="qa no-border" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>
2: Use CSS pseudo selector
.qa:last-child
border-bottom: none;
.qa:nth-last-child(2)
border-bottom: none;
edited 1 hour ago
Temani Afif
81.8k104793
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
edited 1 hour ago
Temani Afif
81.8k104793
edited 1 hour ago
Temani Afif
81.8k104793
edited 1 hour ago
Temani Afif
81.8k104793
81.8k104793
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
answered 1 hour ago
KhaledMohamedPKhaledMohamedP
2,29021720
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
1 hour ago
add a comment |
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
1 hour ago
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
1 hour ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
1 hour ago
never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks
– supersan
1 hour ago
add a comment |
3
judging by your layout, the items are numbered:
[1] [2]
[3] [4]
[5] [6]
now, you can either:
- remove border-bottom from 5th & 6th items
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(5),
.qa:nth-of-type(6)
border-bottom: none;
- add border-bottom to 1st-4th items:
.qa:nth-of-type(n+5)
border-bottom: 1px solid #ccc;
- do similar math but for adding
border-top
you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
which numbers items in a different orientation:
[1] [4]
[2] [5]
[3] [6]
now you reomove border-bottom on every 3rd item:
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(3n)
border-bottom: none;
there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:
.row .qa
border-bottom: 1px solid #ccc;
.row:last-of-type .qa
border-bottom: none;
answered 1 hour ago
zhirzhzhirzh
1,6801723
add a comment |
3
judging by your layout, the items are numbered:
[1] [2]
[3] [4]
[5] [6]
now, you can either:
- remove border-bottom from 5th & 6th items
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(5),
.qa:nth-of-type(6)
border-bottom: none;
- add border-bottom to 1st-4th items:
.qa:nth-of-type(n+5)
border-bottom: 1px solid #ccc;
- do similar math but for adding
border-top
you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
which numbers items in a different orientation:
[1] [4]
[2] [5]
[3] [6]
now you reomove border-bottom on every 3rd item:
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(3n)
border-bottom: none;
there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:
.row .qa
border-bottom: 1px solid #ccc;
.row:last-of-type .qa
border-bottom: none;
answered 1 hour ago
zhirzhzhirzh
1,6801723
add a comment |
3
3
3
judging by your layout, the items are numbered:
[1] [2]
[3] [4]
[5] [6]
now, you can either:
- remove border-bottom from 5th & 6th items
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(5),
.qa:nth-of-type(6)
border-bottom: none;
- add border-bottom to 1st-4th items:
.qa:nth-of-type(n+5)
border-bottom: 1px solid #ccc;
- do similar math but for adding
border-top
you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
which numbers items in a different orientation:
[1] [4]
[2] [5]
[3] [6]
now you reomove border-bottom on every 3rd item:
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(3n)
border-bottom: none;
there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:
.row .qa
border-bottom: 1px solid #ccc;
.row:last-of-type .qa
border-bottom: none;
answered 1 hour ago
zhirzhzhirzh
1,6801723
judging by your layout, the items are numbered:
[1] [2]
[3] [4]
[5] [6]
now, you can either:
- remove border-bottom from 5th & 6th items
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(5),
.qa:nth-of-type(6)
border-bottom: none;
- add border-bottom to 1st-4th items:
.qa:nth-of-type(n+5)
border-bottom: 1px solid #ccc;
- do similar math but for adding
border-top
you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):
.container
display: flex;
flex-direction: column;
flex-wrap: wrap;
which numbers items in a different orientation:
[1] [4]
[2] [5]
[3] [6]
now you reomove border-bottom on every 3rd item:
.qa
border-bottom: 1px solid #ccc;
.qa:nth-of-type(3n)
border-bottom: none;
there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:
.row .qa
border-bottom: 1px solid #ccc;
.row:last-of-type .qa
border-bottom: none;
answered 1 hour ago
zhirzhzhirzh
1,6801723
answered 1 hour ago
zhirzhzhirzh
1,6801723
answered 1 hour ago
zhirzhzhirzh
1,6801723
answered 1 hour ago
zhirzhzhirzh
1,6801723
1,6801723
add a comment |
add a comment |
1
Don't think about it as border-bottom.
Think about it as border-top and exclude the first two elements.
So instead of this:
.qa border-bottom: 1px solid #ccc;
Try this:
.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>The next-sibling combinator (+) targets an element that is immediately preceded by another element, and both share the same parent.
So .qa + .qa would target only .qa elements that are preceded by one .qa element.
.qa + .qa + .qa targets only .qa elements that are preceded by two .qa elements.
Alternatively, you can try this:
.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>answered 2 hours ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
2 hours ago
add a comment |
1
Don't think about it as border-bottom.
Think about it as border-top and exclude the first two elements.
So instead of this:
.qa border-bottom: 1px solid #ccc;
Try this:
.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>The next-sibling combinator (+) targets an element that is immediately preceded by another element, and both share the same parent.
So .qa + .qa would target only .qa elements that are preceded by one .qa element.
.qa + .qa + .qa targets only .qa elements that are preceded by two .qa elements.
Alternatively, you can try this:
.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>answered 2 hours ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
2 hours ago
add a comment |
1
1
1
Don't think about it as border-bottom.
Think about it as border-top and exclude the first two elements.
So instead of this:
.qa border-bottom: 1px solid #ccc;
Try this:
.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>The next-sibling combinator (+) targets an element that is immediately preceded by another element, and both share the same parent.
So .qa + .qa would target only .qa elements that are preceded by one .qa element.
.qa + .qa + .qa targets only .qa elements that are preceded by two .qa elements.
Alternatively, you can try this:
.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>answered 2 hours ago
Michael_BMichael_B
157k50255363
Don't think about it as border-bottom.
Think about it as border-top and exclude the first two elements.
So instead of this:
.qa border-bottom: 1px solid #ccc;
Try this:
.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>The next-sibling combinator (+) targets an element that is immediately preceded by another element, and both share the same parent.
So .qa + .qa would target only .qa elements that are preceded by one .qa element.
.qa + .qa + .qa targets only .qa elements that are preceded by two .qa elements.
Alternatively, you can try this:
.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>.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
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: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>.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>answered 2 hours ago
Michael_BMichael_B
157k50255363
edited 2 hours ago
answered 2 hours ago
Michael_BMichael_B
157k50255363
answered 2 hours ago
Michael_BMichael_B
157k50255363
answered 2 hours ago
Michael_BMichael_B
157k50255363
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
2 hours ago
add a comment |
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
2 hours ago
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 hours ago
@Raz0rwire, what don't you understand?
– Michael_B
2 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
2 hours ago
@Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..
– Raz0rwire
2 hours ago
add a comment |
1
You can add a negative bottom margin to your elements then hide the overflow. This will hide the unwanted borders.
.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>This trick should work even if the number of element in a row is different from 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>It will also work with a reponsive layout where the number of columns can change on small screens:
.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>answered 2 hours ago
Temani AfifTemani Afif
81.8k104793
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
1 hour ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
1 hour ago
add a comment |
1
You can add a negative bottom margin to your elements then hide the overflow. This will hide the unwanted borders.
.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>This trick should work even if the number of element in a row is different from 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>It will also work with a reponsive layout where the number of columns can change on small screens:
.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>answered 2 hours ago
Temani AfifTemani Afif
81.8k104793
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
1 hour ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
1 hour ago
add a comment |
1
1
1
You can add a negative bottom margin to your elements then hide the overflow. This will hide the unwanted borders.
.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>This trick should work even if the number of element in a row is different from 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>It will also work with a reponsive layout where the number of columns can change on small screens:
.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>answered 2 hours ago
Temani AfifTemani Afif
81.8k104793
You can add a negative bottom margin to your elements then hide the overflow. This will hide the unwanted borders.
.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>This trick should work even if the number of element in a row is different from 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>It will also work with a reponsive layout where the number of columns can change on small screens:
.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>.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>.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>.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;
<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>.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>answered 2 hours ago
Temani AfifTemani Afif
81.8k104793
edited 1 hour ago
answered 2 hours ago
Temani AfifTemani Afif
81.8k104793
answered 2 hours ago
Temani AfifTemani Afif
81.8k104793
answered 2 hours ago
Temani AfifTemani Afif
81.8k104793
81.8k104793
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
1 hour ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
1 hour ago
add a comment |
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
1 hour ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
1 hour ago
1
1
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
1 hour ago
This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks
– supersan
1 hour ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
1 hour ago
@supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.
– Temani Afif
1 hour ago
add a comment |
0
If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)
Css for .qa parent element
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*/
answered 2 hours ago
vaibhav kumarvaibhav kumar
295
add a comment |
0
If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)
Css for .qa parent element
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*/
answered 2 hours ago
vaibhav kumarvaibhav kumar
295
add a comment |
0
0
0
If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)
Css for .qa parent element
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*/
answered 2 hours ago
vaibhav kumarvaibhav kumar
295
If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)
Css for .qa parent element
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*/
answered 2 hours ago
vaibhav kumarvaibhav kumar
295
edited 2 hours ago
answered 2 hours ago
vaibhav kumarvaibhav kumar
295
answered 2 hours ago
vaibhav kumarvaibhav kumar
295
answered 2 hours ago
vaibhav kumarvaibhav kumar
295
295
add a comment |
add a comment |
0
You could use border-top and remove the first two with the :nth-child CSS selector. Like this:
.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>answered 1 hour ago
aridlehooveraridlehoover
1,8041615
add a comment |
0
You could use border-top and remove the first two with the :nth-child CSS selector. Like this:
.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>answered 1 hour ago
aridlehooveraridlehoover
1,8041615
add a comment |
0
0
0
You could use border-top and remove the first two with the :nth-child CSS selector. Like this:
.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>answered 1 hour ago
aridlehooveraridlehoover
1,8041615
You could use border-top and remove the first two with the :nth-child CSS selector. Like this:
.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>.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>.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>answered 1 hour ago
aridlehooveraridlehoover
1,8041615
answered 1 hour ago
aridlehooveraridlehoover
1,8041615
answered 1 hour ago
aridlehooveraridlehoover
1,8041615
answered 1 hour ago
aridlehooveraridlehoover
1,8041615
1,8041615
add a comment |
add a comment |
0
I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.
.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>answered 26 mins ago
GeatGeat
208110
add a comment |
0
I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.
.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>answered 26 mins ago
GeatGeat
208110
add a comment |
0
0
0
I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.
.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>answered 26 mins ago
GeatGeat
208110
I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.
.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>.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>.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>answered 26 mins ago
GeatGeat
208110
answered 26 mins ago
GeatGeat
208110
answered 26 mins ago
GeatGeat
208110
answered 26 mins ago
GeatGeat
208110
208110
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55480980%2fhow-to-remove-border-from-elements-in-the-last-row%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
3 hours ago
Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs
– supersan
3 hours ago
4
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
3 hours ago
2
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
2 hours ago