is there any way to make three divs to take up one third of the one line respectly,(using width and inline-block, not using float)

Question

my code is as follows:

html

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

css

.wrapper > div {
  display: inline-block;
}
.wrapper .first {
  width: 33.3%;
}
.wrapper .second {
  width: 33.3%;
}
.wrapper .third {
  width: 33.3%;
}

I use the above code, but it end up breaking into two line. I wonder what's wrong with it?
I know i can use float to do this. but the above code is haulting me for a long time . and hope someone can tell me the reason,thanks in advance.

It's because inline elements [respect the white-space](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements/19038859#19038859) in the markup. Remove the line breaks or follow one of the alternates in the link. — Josh Crozier, Dec 08 '15 at 14:02

score 2 · Accepted Answer · answered Dec 08 '15 at 14:03

Remove the spacing between the divs, I would use HTML comments for this to maintain the readability of your HTML.

.wrapper > div {
  width: 33.33%;
  display: inline-block;
  height: 80px;
}
.first {
  background: red;
}
.second {
  background: yellow;
}
.third {
  background: blue;
}

<div class="wrapper">
  <div class="first"></div><!--
  --><div class="second"></div><!--
  --><div class="third"></div>
</div>

is there any way to make three divs to take up one third of the one line respectly,(using width and inline-block, not using float)

html

css

1 Answers1