13

パーセンテージとして幅を使用して 2 つのセクションを隣り合わせに配置しようとしてinline-blockいますが、ウィンドウの幅全体を埋めていません。

私がこれまでに持っているもの：

HTML

<section class="left-content">
    "Some Code"
</section>
<section class="main-content">
    "Some More Code"
</section>

CSS

.left-content, .right-content { 
    width: 15%; 
    min-width: 150px; 
    padding: 5px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
}
.main-content { 
    width: 85%; 
    min-width: 712px; 
    padding: 10px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
}

しかし、画面上で正確なパーセンテージを小数点まで計算しない限り、うまくいきません。を使用してこれを行う方法を知っている人はいinline-blockますfloatか?

4

1 に答える 1

32

これは、HTML マークアップの空白と改行が原因で、この問題が発生します。「問題」を解決するには、次の 2 つのオプションがあります
。 1. コードから改行と空白を削除します
。 2.font-size親要素の を '0' に設定します。

さらに設定しましたbox-sizing: border-boxか？

于 2013-09-21T14:20:04.513 に答える