65

3列のレイアウトがあります。

したがって、100% を 3 で割ります。

結果は明らかに 33.333....

私の目標は、画面の完全な1/3 です。

質問：

幅の 1/3 を指定するために、CSS が処理できるドットの後の数字はいくつですか?

例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で割る良い方法はありますか？

4

11 に答える 11

123

2018年なので、フレックスボックスを使用してください-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>

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

参考文献:

于 2013-09-13T08:48:18.973 に答える
28

完全な 1/3 は、完全なクロス ブラウザー サポート (IE9 未満のもの) を備えた CSS には存在しません。個人的には次のようにします: (これは完璧な解決策ではありませんが、すべてのブラウザで得られるものとほぼ同じです)

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

#c3 {
    width: auto;
}
于 2013-09-13T08:35:19.857 に答える
10

この fiddleを使用すると、width各 divをいじることができます。33%Chrome と IE の両方で試してみましたが、との幅に違いがあることに気付きました33.3%。33.3%また、 と の間に非常に小さな違いがあることにも気付きました33.33%。これ以上の差は感じません。

33.33%と理論上の違い33.333...%はほんのわずか0.00333...%です。

議論のために、私の画面の幅は1960px;としましょう。かなり高いが一般的な解像度。これら 2 つの幅の違いはまだ0.065333...px.

したがって、小数点以下 2 桁を超えると、精度の差は無視できます。

于 2013-09-13T09:07:20.163 に答える
2

1/3 が完全な結果を返すには、(少なくとも Chrome では)小数点以下 6 桁が必要になる場合があることがわかりました。

例: 1140px / 3 = 380px

1140 コンテナー内に 3 つの要素がある場合、Chrome のインスペクター ツールが 380px であることを示す前に、幅を 33.333333% に設定する必要があります。小数点以下の桁数が少ない場合、Chrome は379.XXXピクセルの小さい幅を返します。

于 2016-03-16T16:47:10.043 に答える
2

この問題を解決する別の方法を提示するだけです (IE のサポートにあまり関心がない場合):

ソフト コード化されたソリューションは、 (IE7 ではサポートされていません) を(等幅の列を確保するためdisplay: table) と共に使用することです。table-layout: fixed

詳細については、こちらをご覧ください。

于 2013-09-13T09:19:10.247 に答える
1

CSSではできないと思いますが、javascriptでピクセルパーフェクトな幅を計算できます。jQuery を使用しているとします。

HTML コード:

<div id="container">
   <div id="col1"></div>
   <div id="col2"></div>
   <div id="col3"></div>
</div>

JS コード:

$(function(){
   var total = $("#container").width();
   $("#col1").css({width: Math.round(total/3)+"px"});
   $("#col2").css({width: Math.round(total/3)+"px"});
   $("#col3").css({width: Math.round(total/3)+"px"});
});
于 2013-09-13T08:40:25.910 に答える