最好的方式表示三分之一的100% 在 CSS？

我有一个大的 <div>里面有三个小的 <div>。它们每个都有33% 的宽度，但这会导致一些对齐问题，因为3 * 33% ！= 100% .在 CSS 中表示完美三分之一的最佳方法是什么？也许只有33.33% ？

59795 次浏览

小开

Are you making any allowance for margins? You could go 30% per column with 5% margin either side of the center column.

小开

The highest resolution screen is a non-production NEC LCD screen with a resolution of 2800x2100. Even at that size, one pixel is 0.0357% of the width of the screen. So 33.33% should be close enough until 5,000-pixel-wide screens become the norm.

John Resig did some research into sub-pixel rounding in different browsers, though, so depending on your three columns to equal exactly the width of the screen may never have a perfect solution.

小开

最佳答案

Now that calc is widely supported among modern browsers, you can use:

#myDiv {
width: calc(100% / 3);
}

Or you can use this as a fallback if your browser wouldn't support it:

#myDivWithFallback {
width: 33.33%;
width: calc(100% / 3);
}

小开

.col_1_3 {
width: 33%;
float: left;
}


.col_1_3:nth-of-type(even) {
width: 34%;
}