CODEWITHSUNDEEP
javascripthtmlcss
Deadpool
Deadpool

Reputation: 8240

Adjusting div blocks to be equidistant from left-right border and among themselves

I have n number of div blocks which must be equidistant among themselves. I am trying this but failing with display: inline-block;. Can someone help tell me why I am failing? The solution must not be hard-bound on pixels and should be dynamic without using hard coded widths or heights. 

* {
  margin: 0px;
  padding: 0px;
}
body {
  background: #ddf;
}
.center {
  text-align: center;
}
.sectioncontainer {
  padding: 10px;
  background: yellow;
}
.sec1 {
  display: inline-block;
  border: 2px solid black;
  background: pink;
}
.sec2 {
  display: inline-block;
  border: 2px solid black;
  background: orange;
}
.sec3 {
  display: inline-block;
  border: 2px solid black;
  background: green;
}
<div class="sectioncontainer">
  <section class="sec1">
    aaa
  </section>
  <section class="sec2">
    bbb
  </section>
  <section class="sec3">
    ccc
  </section>
</div>

JS-FIDDLE:

https://jsfiddle.net/g89d38wf/

Upvotes: 0

Views: 57

Answers (1)

Patel
Patel

Reputation: 1478

Just set the display of sectioncontainer to flex 

.sectioncontainer {
     display: flex;
     justify-content: space-between;   
 }

To distribute the items in container evenly, justify-content as space-between. Check the docs here.

The CSS justify-content property defines how the browser distributes space between and around flex items along the main-axis of their container.

This link can help you get more insight on this.

Upvotes: 1

Related Questions