html - 同じ行に 3 つの列を取得するにはどうすればよいですか?

Question

1 行に 3 つの列を取得しようとしています。divにパディングを追加するまではうまくいきました。ちょっとレスポンシブにするためにパーセンテージを使用しています。以下は CSS です。

.contentLine .column {
    float: left;
    margin: 0;
    width: 31%;
    margin-right: 1%;
    padding: 1%;
    position: inherit;
}

.contentLine .last {
    margin-right: 0;
}

これが私のフィドルです

パーセンテージを間違えましたか？

Answer 1

を 30% にwidth減らします。.column

width現在、 31% (合計 93%) のボックスが 3 つあるため、次の行に進みます。彼らpadding（右と左）は1％（合計6％）で、あなたはmargin-right1％（合計3％）で、合計すると100％を超えます。

.contentLine .column {
    float: left;
    margin: 0;
    width: 30%;
    margin-right: 1%;
    padding: 1%;
    position: inherit;
}