How to remove border form elements in the last row?Targeting flex items on the last rowHow to vertically wrap content with flexbox?How do you disable browser Autocomplete on web form field / input tag?Remove border from IFrameCSS3'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
Do parry bonuses stack?
Am I breaking OOP practice with this architecture?
How to show a landlord what we have in savings?
Infinite sum of harmonic number
Obtaining database information and values in extended properties
How to compactly explain secondary and tertiary characters without resorting to stereotypes?
Does the Idaho Potato Commission associate potato skins with healthy eating?
Placement of More Information/Help Icon button for Radio Buttons
Do Iron Man suits sport waste management systems?
Knowledge-based authentication using Domain-driven Design in C#
Finitely generated matrix groups whose eigenvalues are all algebraic
Check if a point is right or left of another one in TikZ
What is the opposite of "eschatology"?
Is it possible to create a QR code using text?
Should I tell management that I intend to leave due to bad software development practices?
Why is it a bad idea to hire a hitman to eliminate most corrupt politicians?
Pact of Blade Warlock with Dancing Blade
What was Prahlada's age when his father was killed?
Unlock My Phone! February 2018
Can compressed videos be decoded back to their uncompresed original format?
Can a virus destroy the BIOS of a modern computer?
Were days ever written as ordinal numbers when writing day-month-year?
Why was Sir Cadogan fired?
Car headlights in a world without electricity
How to remove border form elements in the last row?
Targeting flex items on the last rowHow to vertically wrap content with flexbox?How do you disable browser Autocomplete on web form field / input tag?Remove border from IFrameCSS3'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 9 mins ago
Temani Afif
81.8k104793
asked 2 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 9 mins ago
Temani Afif
81.8k104793
asked 2 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
2 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
2 hours ago
3
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
1
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
1 hour 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 9 mins ago
Temani Afif
81.8k104793
asked 2 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 9 mins ago
Temani Afif
81.8k104793
asked 2 hours ago
supersansupersan
1,7871837
edited 9 mins ago
Temani Afif
81.8k104793
asked 2 hours ago
supersansupersan
1,7871837
edited 9 mins ago
Temani Afif
81.8k104793
edited 9 mins ago
Temani Afif
81.8k104793
edited 9 mins ago
Temani Afif
81.8k104793
81.8k104793
asked 2 hours ago
supersansupersan
1,7871837
asked 2 hours ago
supersansupersan
1,7871837
asked 2 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
2 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
2 hours ago
3
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
1
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
1 hour 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
2 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
2 hours ago
3
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
1
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
1 hour ago
I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child
– Funk Doc
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
2 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
2 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
2 hours ago
3
3
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
1
1
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
1 hour ago
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
1 hour ago
add a comment |
6 Answers
6
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 54 mins ago
Temani Afif
81.8k104793
answered 59 mins ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
53 mins ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
50 mins 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
45 mins ago
add a comment |
2
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 49 mins ago
zhirzhzhirzh
1,6701723
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 1 hour ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
1 hour 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
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 1 hour 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
38 mins 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
14 mins 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 1 hour 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 47 mins ago
aridlehooveraridlehoover
1,8041615
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');
);
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-form-elements-in-the-last-row%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
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 54 mins ago
Temani Afif
81.8k104793
answered 59 mins ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
53 mins ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
50 mins 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
45 mins 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 54 mins ago
Temani Afif
81.8k104793
answered 59 mins ago
KhaledMohamedPKhaledMohamedP
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
53 mins ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
50 mins 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
45 mins 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 54 mins ago
Temani Afif
81.8k104793
answered 59 mins 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 54 mins ago
Temani Afif
81.8k104793
answered 59 mins ago
KhaledMohamedPKhaledMohamedP
2,29021720
edited 54 mins ago
Temani Afif
81.8k104793
edited 54 mins ago
Temani Afif
81.8k104793
edited 54 mins ago
Temani Afif
81.8k104793
81.8k104793
answered 59 mins ago
KhaledMohamedPKhaledMohamedP
2,29021720
answered 59 mins ago
KhaledMohamedPKhaledMohamedP
2,29021720
answered 59 mins ago
KhaledMohamedPKhaledMohamedP
2,29021720
2,29021720
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
53 mins ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
50 mins 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
45 mins ago
add a comment |
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
53 mins ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
50 mins 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
45 mins ago
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
53 mins ago
they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)
– Temani Afif
53 mins ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
50 mins ago
Yes, good catch Temani! Thanks
– KhaledMohamedP
50 mins 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
45 mins 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
45 mins ago
add a comment |
2
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 49 mins ago
zhirzhzhirzh
1,6701723
add a comment |
2
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 49 mins ago
zhirzhzhirzh
1,6701723
add a comment |
2
2
2
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 49 mins ago
zhirzhzhirzh
1,6701723
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 49 mins ago
zhirzhzhirzh
1,6701723
answered 49 mins ago
zhirzhzhirzh
1,6701723
answered 49 mins ago
zhirzhzhirzh
1,6701723
answered 49 mins ago
zhirzhzhirzh
1,6701723
1,6701723
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 1 hour ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
1 hour 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
1 hour 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 1 hour ago
Michael_BMichael_B
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
1 hour 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
1 hour 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 1 hour 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 1 hour ago
Michael_BMichael_B
157k50255363
edited 1 hour ago
answered 1 hour ago
Michael_BMichael_B
157k50255363
answered 1 hour ago
Michael_BMichael_B
157k50255363
answered 1 hour ago
Michael_BMichael_B
157k50255363
157k50255363
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
1 hour 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
1 hour ago
add a comment |
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
1 hour 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
1 hour ago
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
1 hour ago
Your first solution is absolutely unreadable. Your second option I like.
– Raz0rwire
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
1 hour ago
@Raz0rwire, what don't you understand?
– Michael_B
1 hour 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
1 hour 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
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 1 hour 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
38 mins 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
14 mins 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 1 hour 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
38 mins 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
14 mins 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 1 hour 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 1 hour ago
Temani AfifTemani Afif
81.8k104793
edited 11 mins ago
answered 1 hour ago
Temani AfifTemani Afif
81.8k104793
answered 1 hour ago
Temani AfifTemani Afif
81.8k104793
answered 1 hour 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
38 mins 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
14 mins 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
38 mins 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
14 mins 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
38 mins 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
38 mins 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
14 mins 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
14 mins 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 1 hour 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 1 hour 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 1 hour 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 1 hour ago
vaibhav kumarvaibhav kumar
295
edited 1 hour ago
answered 1 hour ago
vaibhav kumarvaibhav kumar
295
answered 1 hour ago
vaibhav kumarvaibhav kumar
295
answered 1 hour 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 47 mins 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 47 mins 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 47 mins 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 47 mins ago
aridlehooveraridlehoover
1,8041615
answered 47 mins ago
aridlehooveraridlehoover
1,8041615
answered 47 mins ago
aridlehooveraridlehoover
1,8041615
answered 47 mins ago
aridlehooveraridlehoover
1,8041615
1,8041615
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');
);
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-form-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');
);
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');
);
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');
);
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
2 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
2 hours ago
3
Just add: .qa:nth-last-child(-n+2) border: 0;
– bea
2 hours ago
1
@bea: your's is the right answer! Put it as an answer and you'll get upvoted
– enxaneta
1 hour ago