I have a variable number of items that may or may not fit in one "row" inside a container. If they do not fit, additional "row(s)" should be created.
Each item will only contain a single word (or maximum 2), keeping the data to one line. I want each item to have a bottom border of 1px, and each row should also have a bottom border of 1px, resulting in a layout like this:
|-----------------------------------
| |
| Foo bar Foo bar Foo bar |
|--=======-------------------------|
| |
| |
| Foo bar Foo bar Foo bar |
|----------------------------------|
(The mouse is hovering over the first item).
The bottom border of the items should overlap the line at the bottom of the row (concealing as much of the row border as the width of the item allows).
I found this codepen, but
- I am unsure how to style the bottom border of each "row"
- The items shift whenever I hover over them with the mouse
What steps can I take to achieve the desired outcome?
Note: I am open to using CSS3 if it simplifies the process.
.container {
border: 1px solid grey;
width: 300px;
}
.item {
float: left;
/*border: 1px solid green;*/
border: 1px solid transparent;
padding: 2px 7px 2px 7px;
}
.item:hover {
border-bottom: 1px solid red;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="item">Foo bar</div>
<div class="item">Foo bar</div>
<div class="item">Foo bar</div>
<div class="item">Foo bar</div>
<div class="item">Foo bar</div>
<div class="item">Foo bar</div>
<div class="item">Foo bar</div>
<div class="item">Foo bar</div>
<div class="item">Foo bar</div>
<div class="item">Foo bar</div>
</div>