CODEWITHSUNDEEP
htmlcss
Mads Hjorth
Mads Hjorth

Reputation: 447

Equally spread div with small space

Hi i tried using examples i could find on the web but i just can't seem to make it work, so who is better to ask than you guys.

I wish to spread id="klip" equally. i set their widths to 18% so each space could be 2%.

How it looks now: https://jsfiddle.net/d8L1Lax4/

my html:

<div class="boks">
   <span id="klip">2 KLIP</span>
   <span id="klip">8 KLIP</span>
   <span id="klip">16 KLIP</span>
   <span id="klip">32 KLIP</span>
   <span id="klip">48 KLIP</span>
</div>

my css:

.boks > #klip, #pris {
   display: inline-block;
   *display: inline; /* For IE7 */
   zoom: 1; /* Trigger hasLayout */
   width: 18%;
   text-align: center;
   background-color: #da85a3;
   padding-top: 20px;
   padding-bottom: 20px;
   font-family: 'Poppins', sans-serif !important;
   font-size: 17px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

Upvotes: 1

Views: 36

Answers (2)

Chris Estreich
Chris Estreich

Reputation: 66

As an alternative to flexbox, you may want to consider using a grid system. This will serve you well in many cases, including the one you're asking about. Bootstrap gives you an easy to use grid, but there are lightweight ones like Pure.css.

If you use Pure, for example, it looks like this:

.klip > div {
  background-color: #ddd;
  text-align: center;
  margin: 0 5px 0;
  padding: 20px 0;
}
/* If you don't want any leading or trailing margins: */
.klip:first-child > div {
  margin-left: 0;
}
.klip:last-child > div {
  margin-right: 0;
}

<div class="pure-g boks">
  <div class="pure-u-1-5 klip">
    <div>2 Klip</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>8 KLIP</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>16 KLIP</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>32 KLIP</div>
  </div>
  <div class="pure-u-1-5 klip">
    <div>48 KLIP</div>
  </div>
</div>

It looks like this.

Upvotes: 0

Stickers
Stickers

Reputation: 78716

I suggest to use flexbox layout. Note, id must be unique on a page, I changed it to class.

.boks {
  display: flex;
  justify-content: space-between; /*or space-around*/
  background-color: aqua;
}
.klip {
  width: 18%;
  padding: 20px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif !important;
  font-size: 17px;
  text-align: center;
  background-color: #da85a3;
}
<div class="boks">
  <span class="klip">2 KLIP</span>
  <span class="klip">8 KLIP</span>
  <span class="klip">16 KLIP</span>
  <span class="klip">32 KLIP</span>
  <span class="klip">48 KLIP</span>
</div>

Upvotes: 3

Related Questions