この jsFiddle を検討してください: http://jsfiddle.net/SnhDX/2/
ご覧のとおり、赤いinline-block-1div は、テキストが収まるのに必要以上のスペースを占めています。空の部分を削除する方法はありますか? (を削除せず、ハードコーディングせずに)緑色のように見えますか? inline-block-2max-widthwidthjQuery は許可されていますが、CSS/HTML のみのソリューションが推奨されます。
参考画像です。赤が間違っており、緑が正しい：
これは少し注意が必要です。
2つのdivを一致させることができた最も近い方法は、 「Ipsum」<br>のinline-1直後にを挿入することです。犯人は「Ipsum」と「This」の間の空白です。示された100pxでテキストが折り返されると、2つの単語の間のスペースを含め、収まるすべてのものが保持されます。ハード空白を打ち負かすことができる唯一のことは、それを折り返すために明示的な幅を設定するか、それを取り除くことです。スペースの代わりにスペースを挿入する<br>と、その空白が削除されますが、ブラウザーではまだ数ピクセルずれています。
私はその男になるのは嫌いですが、これは不必要に複雑に思えます-このセットアップが必要なのは何ですか？sを使用しない限り、明示的な幅を変更できないのは非常に不規則ですfloat。たぶん、これを単純化して自分の生活を楽にする方法はありますか？
垂直方向のサイズ設定でこの問題が発生しました。このCSSを追加することが役立つかどうかを確認してください。
overflow:hidden
頑張ってください！-ブレンダン
保持する必要がある場合max-width: 100pxは、「正しい」コンテナの幅と同じ幅を設定するだけで、両方とも同じサイズになります。