css将宽度100%划分为3列

Question

我有一个布局,我有3列.

因此,我将100%除以3.

结果显然是33.333 ....

我的目标是完美的1/3屏幕.

题:

点后面有多少个数字可以用CSS来指定1/3的宽度？

例如33.33333 (n=5)←有多少ncss可以处理

HTML:

<div id="wrapper">
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
</div>

CSS:

#c1, #c2, #c3 {
    width: 33%; // 1/3 of 100%
}

是否有更好的方法除以3？

Answer 1

使用CSS calc():

body {
  margin: 0;
}

div {
  height: 200px;
  width: 33.33%; /* as @passatgt mentioned in the comment, for the older browsers fallback */
  width: calc(100% / 3);
  display: inline-block;
}

div:first-of-type { background-color: red }
div:nth-of-type(2) { background-color: blue }
div:nth-of-type(3) { background-color: green }

<div></div><div></div><div></div>

的jsfiddle

参考文献:

• 如何删除内联块元素之间的空格？
• MDN calc()
• 我可以用吗 calc()

更新:因为它是2018年,使用flexbox - 不再有inline-block 空白问题:

body {
  margin: 0;
}

#wrapper {
  display: flex;
  height: 200px;
}

#wrapper > div {
  flex-grow: 1;
}

#wrapper > div:first-of-type { background-color: red }
#wrapper > div:nth-of-type(2) { background-color: blue }
#wrapper > div:nth-of-type(3) { background-color: green }

<div id="wrapper">
  <div id="c1"></div>
  <div id="c2"></div>
  <div id="c3"></div>
</div>

如果要创建网格,甚至是CSS网格.

body {
  margin: 0;
}

#wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
}

#wrapper>div:first-of-type { background-color: red }
#wrapper>div:nth-of-type(2) { background-color: blue }
#wrapper>div:nth-of-type(3) { background-color: green }

<div id="wrapper">
  <div id="c1"></div>
  <div id="c2"></div>
  <div id="c3"></div>
</div>

Answer 2

如何使用CSS3 flex模型:

HTML代码:

<div id="wrapper">
    <div id="c1">c1</div>
    <div id="c2">c2</div>
    <div id="c3">c3</div>
</div>  

CSS代码:

*{
    margin:0;
    padding:0;
}

#wrapper{
    display:-webkit-flex;
    -webkit-justify-content:center;

    display:flex;
    justify-content:center;

}

#wrapper div{
    -webkit-flex:1;
    flex:1;
    border:thin solid #777;

}

Answer 3

完整的跨浏览器支持(IE9以下任何东西)都不能在CSS中存在完美的1/3.我个人会这样做:(这不是完美的解决方案,但它与所有浏览器一样好)

#c1, #c2 {
    width: 33%;
}

#c3 {
    width: auto;
}

Answer 4

使用这个小提琴,你可以玩width每个div.我在Chrome和IE中都尝试过,我发现33%和之间的宽度不同33.3%.我还注意到33.3%和之间的差异非常小33.33%.我没有注意到与此相比的任何差异.

33.33%和理论之间的区别33.333...%仅仅是一个0.00333...%.

为了论证,请说我的屏幕宽度是1960px; 相当高但常见的分辨率.这两个宽度之间的差异仍然只是0.065333...px.

因此,超过两位小数,精度差异可以忽略不计.

Answer 5

如果你想知道,在Bootstrap模板系统(这是非常准确的),这里是他们如何应用类.col-md-4(12列系统的1/3)划分列

CSS

.col-md-4{
    float: left;
    width: 33.33333333%;
}

我不是浮动的粉丝,但如果你真的希望你的元素完全是你页面的1/3,那么你没有选择,因为有时当你使用inline-block元素时,浏览器可以考虑你的空间HTML作为1px空间,将打破你完美的1/3.希望它有所帮助!

Answer 6

万一有人还在寻找答案,

让浏览器处理这个问题.试试这个:

• display: table 在容器元素上.
• display: table-cell 关于儿童元素.

无论您有3列还是10列,浏览器都会均匀划分它.

编辑

容器元素也应该具有:table-layout: fixed否则浏览器将确定每个元素的宽度(大多数时候并不坏).

Answer 7

.selector{width:calc(100% / 3);}