CODEWITHSUNDEEP
htmlcss
Syed
Syed

Reputation: 16513

Stacking div one below another horizontally

Stacking div one below another horizontally in fixed width parent div, all the child div's should be placed in fluidic manner.

.parent {
  width: 200px;
  height: 52px;
  border: 1px solid red
}

.child {
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #fff
}
<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>

I need this to be fixed only with CSS but not using JS, here is what I need:

I am expecting this to happen

Upvotes: 2

Views: 90

Answers (2)

lolbas
lolbas

Reputation: 794

Following example uses jQuery. Uses absolute positioning and calculation of left offset.

const parentNode = $('.parent');
const childNodes = parentNode.find('.child');
const childNodeWidth = childNodes.outerWidth();
const childOffset = (parentNode.width() - childNodeWidth) / (childNodes.length - 1) / parentNode.width() * 100;
let zIndex = 0;

for (var i = 0; i < childNodes.length; i++) {
  childNodes.eq(i).css({
    left: i * childOffset + '%',
    backgroundColor: 'rgb(0, ' + parseInt(i * 255 / childNodes.length) + ', 255)',
    zIndex: zIndex++
  });
}
.parent {
  width: 200px;
  height: 52px;
  border: 1px solid red;
  position: relative;
}

.child {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #fff;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<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>

jsfiddle example

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272909

Here is a solution using flex and absolute position:

.parent {
  width: 200px;
  height: 52px;
  border: 1px solid red;
  display:flex;
  flex-wrap:nowrap;
  padding: 0 25px;
  justify-content:space-around;
  box-sizing:border-box;
}

.child {
  position:relative;
  height:100%;
  max-width:0px;
  margin:auto;
}
.child:first-child {
  margin-left:0;
}
.child:last-child {
  margin-right:0;
}
.child:before {
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:-25px;
  bottom:0;
  border: 1px solid #000;
  border-radius: 50%;
  background-color: #fff;
  box-sizing:border-box;
}
<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>
<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>
<div class="parent">
  <div class="child"></div>
  <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>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>

Upvotes: 2

Related Questions