CSS implementation of multiple columns equal width method

The implementation of the method has CSS and JS three methods, the following we look at.

Multiple columns in the Web page is a common layout, generally using the percentage of the Width property can be easily implemented.

But what I really want to say is that you can achieve multiple columns, such as the slide navigation of a Web site, without being clear on how many elements are in the end:

The number of slide navigation changes with the number of slides, and the number of elements is not fixed. Need to be fully equal, and fill the entire parent element.

I've come up with three solutions, which are described separately below.

Display:table-cell

The first method uses the Table-cell value of the display property to turn the element into a table, which can be widened.

<style type= "Text/css" >
. box {
width:600px;
}

. Box Div {
Color: #FFF;
Display:table-cell;
height:150px;
}
</style>
<div class= "box" >
<div style= "background: #666;" >
<span> 1th column 1th column 1th column 1th </span>
</div>
<div style= "background: #444;" >
<span> 2nd Column 2nd Column 2nd column 2nd </span>
</div>
<div style= "background: #222;" >
<span> 3rd Column 3rd column 3rd column 3rd </span>
</div>
<div style= "background: #000;" >
<span> 4th Column 4th Column 4th column 4th </span>
</div>
</div>
This method is relatively good, compatible to IE8.

I chose this scenario after weighing compatibility and complexity.

Box-flex

The Box-flex property is something new to CSS3, and he can assign the width of the parent element to the child elements, just like fractions.

Assume that the width of a container is 1200px and there are three child elements inside.

If the Box-flex property of the three child elements is set to 1, they are divided equally by 1200px, which means that each element will have a 400px width.

If the Box-flex property of an element is set to 2 and the remaining two is set to 1, then the element set to 2 will have a width of 600px, and 1 elements of two will have a 300px width.

See here, you will find that the Box-flex property is too good to have wood, with it to achieve multiple columns such as high easy, and very good understanding.

<style type= "Text/css" >
. box {
width:600px;
Display:-webkit-box;/* Note here * *
}

. box:after {
Content: ';
height:0;
Display:block;
Clear:both;
}

. Box Div {
Color: #FFF;
Box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
height:150px;
Float:none;
}
</style>
<div class= "box" >
<div style= "background: #666;" >
<span> 1th Column </span>
</div>
<div style= "background: #444;" >
<span> 2nd Column </span>
</div>
<div style= "background: #222;" >
<span> 3rd Column </span>
</div>
<div style= "background: #000;" >
<span> 4th Column </span>
</div>
</div>
Unfortunately, this method is not compatible, only ie10+ and Chrome and other browsers support, but such a powerful attribute is better to understand.

Javascript

The last method is not a pure CSS, need to use the JS implementation, this method is the best compatibility, support almost all browsers, but more trouble.

<style type= "Text/css" >
. box {
width:600px;
}

. box:after {
Content: ';
height:0;
Display:block;
Clear:both;
}

. Box Div {
Color: #FFF;
height:150px;
Float:left;
}
</style>
<script>
Window.onload = function () {
var box = document.getElementById (' box '),
Elements = box.getelementsbytagname (' div '),
width = Box.currentstyle? box.currentstyle[' width ': document.defaultView.getComputedStyle (box, false) [' width '];
width = parseint (width);
for (var i = elements.length-1 i >= 0; i--) {
Elements[i].style.width = width/elements.length + ' px ';
};
}
</script>
<div class= "box" id= "box" >
<div style= "background: #666;" >
<span> 1th Column </span>
</div>
<div style= "background: #444;" >
<span> 2nd Column </span>
</div>
<div style= "background: #222;" >
<span> 3rd Column </span>
</div>
<div style= "background: #000;" >
<span> 4th Column </span>
</div>
</div>