Geek asks and answers

Evenly spaced, fixed-width columns - in sensitive settings

I am trying to create several evenly spaced columns ( ol), with the columns themselves being a fixed width.

So far, I have managed to achieve the desired effect using the layout tableand a nested additional element inside the list item.

HTML:

<ol>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ol>​

CSS

ol {
    display: table;
    width: 100%;
}

li {
    display: table-cell;
}

div {
    margin: 0 auto;
    width: 100px;
    height: 250px;
}

This one works fine , but has the following two drawbacks:

  • As you can see in the demo , the first and last columns do not line up with the original outer edges.
  • This cannot be really used. The only thing you can do with smaller widths is to drain them , but I would like to split them (2 or 3 per line).

, CSS? , JS, CSS-.

P.S. IE7, IE8. CSS3 , selectivizr ( , JS; -)).

+2
2

" * * " . , , - , text-align:justify:

ol {
  /*force the desired behaviour*/
  text-align: justify;
  /*remove the minimum gap between columns caused by whitespace*/
  font-size: 0;
}

li {
  /*make text-align property applicable*/
  display: inline;
}

/*force "justify" alignment that requires text to be at least over 2 lines*/
ol:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 250px;
}

.

NB: font-size text-align ol reset (.. )

+2

, , -, , , -

     box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

, , .

, , .

0

More articles:


All Articles