I am editing in bullets of a slider. I want to apply gradient background on parent div of bullets so I need to increase height of parent div but when I am increasing the height all bullets are aligning on top of parent div.
HTML
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS
.parent {
height: 200px;
background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgb(27, 4, 4));
width: 100%;
text-align: center;
bottom: 0;
position: absolute;
}
.child {
background-color: blue;
width: 25px;
height: 5px;
margin-left: 2px;
display: inline-block;
}
Please let me know how to align all bullets on bottom of parent div.
JSFIDDLE
Use flexbox and you can easily align them:
.parent {
height: 200px;
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgb(27, 4, 4));
width: 100%;
text-align: center;
bottom: 0;
position: absolute;
display: flex;
align-items: flex-end; /*put them at the bottom*/
justify-content: center; /*center horizontally*/
flex-wrap:wrap;
align-content: flex-end;
}
.child {
background-color: blue;
width: 25px;
height: 5px;
margin: 5px;
}
body {
margin: 0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Not sure I understand what you're looking for, but if you want those lines to be at the bottom of the parent div, you could create another container div, set its position to absolute and bottom to 0. You will also need to find a solution to align it horizontally, such as setting the container width to 100%.
HTML
<div class="parent">
<div class="container">
<div class="child"></div>
...
<div class="child"></div>
</div>
</div>
CSS
.container {
position: absolute;
bottom: 0;
width: 100%;
}
https://jsfiddle.net/1b2fuyvm/27/
Related
I am trying to create a sticky central element with flex-direction column-reverse. Using flex-direction column works fine. Is this possible with column-reverse?
.parent {
display: flex;
overflow-y: scroll;
/* works with flex-direction: column; */
flex-direction: column-reverse;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
.child, .sticky {
width: 100%;
height: 40px;
background: gold;
border-bottom: 1px solid #555;
flex-shrink: 0;
}
.sticky {
background: crimson;
position: sticky;
top: 0;
bottom: 0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="sticky"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Can you please check the below code? Hope it will work for you. We just add the one div .child-parent in the parent div and set flex properties according to solve your problem.
.parent {
border: 1px solid #ccc;
flex-direction: row;
}
.child-parent {
overflow-y: scroll;
height: 200px;
display: flex;
display: -webkit-flex;
flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
position: relative;
}
.child,
.sticky {
width: 100%;
height: 40px;
background: gold;
border-bottom: 1px solid #555;
flex-shrink: 0;
flex-direction: row;
}
.sticky {
width: 100%;
background: crimson;
position: sticky;
position: -webkit-sticky;
bottom: 0;
top: 0;
display: flex;
z-index: 1;
flex-shrink: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="parent">
<div class="child-parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="sticky"></div>
<div class="child">11</div>
<div class="child">12</div>
<div class="child">13</div>
<div class="child">14</div>
<div class="child">15</div>
<div class="child">16</div>
<div class="child">17</div>
<div class="child">18</div>
<div class="child">19</div>
</div>
</div>
</body>
</html>
I want to add a different number of items per row in CSS.
.parent {
display: flex;
flex-wrap:wrap:
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
So, I want to create the next logic:
on the first row to have 4 items
on second 3 items
on third 1 item
How to do this?
Your Answer
.parent {
text-align: center;
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div> <br>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div> <br>
<div class="child"></div>
</div>
You can do like this:
With break elements
.parent {
display: flex;
flex-wrap:wrap;
justify-content: center;
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
}
.break {
flex-basis: 100%;
height: 0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="break"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="break"></div>
<div class="child"></div>
</div>
With pseudo-elements and nth-child
.parent {
display: flex;
flex-wrap:wrap;
justify-content: center;
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
}
.break {
flex-basis: 100%;
height: 0;
}
.parent::before, .parent::after {
content: '';
width: 100%;
order: 1;
}
.child:nth-child(n + 5) {
order: 1;
}
.child:nth-child(n + 8) {
order: 2;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
This can be done by using :nth-child() selector.
.parent {
display: flex;
flex-wrap:wrap;
justify-content: center;
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
}
.child:nth-child(9), .child:nth-child(5) {
flex-basis: 100%;
height: 0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Or can be done by using line-break class.
.parent {
display: flex;
flex-wrap:wrap;
justify-content: center;
}
.child {
height: 100px;
width: 100px;
margin: 10px;
background: blue;
}
.line-break {
flex-basis: 100%;
height: 0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="line-break"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="line-break"></div>
<div class="child"></div>
</div>
If container has fixed width and height, is it possible to move child elements to next line until there is enough space vertically and then, when there it no more vertical space, make last line child element take width space.
It is hard to verbally expain what I want to achieve, so here is JsFiddle of what I currently have: JsFiddle
.parent {
width: 400px;
height: 300px;
background: white;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.child {
width: 160px;
height: 80px;
margin: 4px;
background: red;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Image of what I would like to achieve:
You can have something similar if you use a column direction. In this case, the overflow will occur on the right and not on the bottom:
.parent {
width: 400px;
height: 300px;
background: white;
border: 1px solid black;
display: flex;
flex-direction:column;
justify-content:flex-end;
flex-wrap: wrap;
overflow: hidden;
}
.child {
width: 160px;
height: 80px;
margin: 4px;
background: red;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
I have a set of parents and childs div. How do I make all first child of each parent to set its opacity to 1, when any of the first child is on hover while every other has its opacity set to 0.25? Also the same for the 2nd, 3rd and 4th child of each parent.
For example, there is a set of 3 rows (parent), each with a set o 4 boxes (child), how do I make every second box of each row highlighted when the second box on any row is hovered, and every other child not highlighted?
Picture of what I expect to happen:
.child {
background: grey;
display: inline-block;
height: 50px;
width: 50px;
}
.grandparent:hover .child {
opacity: .25;
}
.parent .child:hover {
opacity: 1;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
The most straightforward way to achieve this setup, is to make each .parent a vertical column, rather than a horizontal row.
Then you can use:
.grandparent:hover .child {
opacity: .25;
}
to lowlight all the .child divs... and
.parent:hover .child {
opacity: 1;
}
to re-highlight the .child divs in the .parent column being hovered over.
Working Example:
.grandparent {
display: flex;
justify-content: space-around;
width: 214px;
height: 156px;
padding: 2px;
}
.parent {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: 50px;
height: 156px;
}
.child {
width: 50px;
height: 50px;
background-color: grey;
}
.grandparent:hover .child {
opacity: .25;
}
.parent:hover .child {
opacity: 1;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
If you want a pure CSS way, you can use transform and rotate to do this:
.child {
background: grey;
display: inline-block;
height: 50px;
width: 50px;
}
.parent:hover .child {
opacity: .25;
}
.parent .child:hover {
opacity: 1;
}
.grandparent {
-ms-transform: rotate(90deg);
/* IE 9 */
-ms-transform-origin: 10% 100%;
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Chrome, Safari, Opera */
-webkit-transform-origin: 10% 100%;
/* Chrome, Safari, Opera */
transform: rotate(90deg);
transform-origin: 10% 100%;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
I have elements wrapped into a parent div, and they're all floated to left. The parent element has overflow: scroll and when the parent become thinner than the children, i don't want the children to break line, but the parent to overflow them horizontally.
I've discovered that i can do this by using: display: inline-block for the children to behave text-like and then, set the parent to white-space: nowrap. This way, they will not break.
But i want a solution with the children floated. Can someone help me?
Working example
HTML
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS
.parent{
padding: 3px;
width: 100%;
height: 200px;
background-color: green;
overflow: scroll;
/*does the trick*/
white-space: nowrap;
}
.child{
display: inline-block;
height: 190px;
width: 80px;
background-color: gray;
margin-left: 10px;
}
[edit] - Since Paulie asked in the comments, i've got to say that no, they don't have to be floated for working. I know this. But I want to know if there is another way to accomplish that and I think that there is no better place for this but the SO community
Flexbox can do that and it doesn't even need the white-space:nowrap.
.parent {
padding: 3px;
height: 200px;
background-color: green;
overflow: auto; /* or scroll */
display: flex;
}
.child {
height: 190px;
flex: 0 0 80px;
background-color: gray;
margin-left: 10px;
}
.parent {
padding: 3px;
height: 100px;
background-color: green;
overflow: scroll;
display: flex;
}
.child {
height: 90px;
flex: 0 0 80px;
background-color: gray;
margin-left: 10px;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
JSfiddle Demo
display: table does do that too, though flex is a more appropriate way to do layout than table, unless you need it to work on for example IE8/9, which flex doesn't, but then again, your inline-block is more appropriate than table
.parent{
padding: 3px;
max-width: 100%;
height: 200px;
background-color: green;
overflow: scroll;
display: table;
}
.child{
display: table-cell;
height: 190px;
min-width: 80px;
background-color: gray;
padding-left: 10px;
border: 1px solid white
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>