ブログで取り組んでいる新しいテーマで流動的なレイアウトを使用しています。私はよくコードについてブログを書き<pre>、投稿内にブロックを含めます。float: leftコンテンツ領域の列にmax-widthは、列が特定の最大幅で停止し、縮小することもできるようになっています。
+ ---------- + + ------ +
| テキスト| | テキスト|
| | | |
| | | |
| | | |
| | | |
| | | |
+ ---------- + + ------ +
最大収縮
私が欲しいのは、<pre>要素をテキスト列よりも広くして、水平スクロールバーなしで80文字でラップされたコードを収めることができるようにすることです。<pre>しかし、流動性に影響を与えることなく、要素をコンテンツ領域からオーバーフローさせたいと思います。
+ ---------- + + ------ +
| テキスト| | テキスト|
| | | |
+ ---------- +-+ + ------ + ------ +
| コード| | コード|
+ ---------- +-+ + ------ + ------ +
| | | |
+ ---------- + + ------ +
最大収縮
ただし、そこmax-widthにオーバーハングを挿入すると、流動性がなくなります。ブラウザをその幅を超えて縮小しても<pre>、列の幅は指定されたままになります。max-width
この最低限のシナリオで問題を再現しました。
<div style="float: left; max-width: 460px; border: 1px solid red">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<pre style="max-width: 700px; border: 1px solid blue">
function foo() {
// Lorem ipsum dolor sit amet, consectetur adipisicing elit
}
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
次のいずれかを実行すると、流動性が回復することに気付きました。
<pre>（doh ...）を削除します- を削除します
float: left
私が現在使用している回避策は、<pre>要素を投稿列の「区切り」に挿入して、投稿セグメントとセグメントの幅<pre>が相互に排他的に管理されるようにすることです。
+ ---------- + + ------ +
| テキスト| | テキスト|
+ ---------- + + ------ +
+ ------------- + + ------------- +
| コード| | コード|
+ ------------- + + ------------- +
+ ---------- + + ------ +
+ ---------- + + ------ +
最大収縮
しかし、これ<div>により、意味的に元の状態を維持したいポストマークアップに追加の終了要素と開始要素を挿入する必要があります。
float: left確かに、ボックスモデルがコンテンツが溢れているフロートでどのように機能するかを完全に理解していないため、コンテナ上とその<pre>内部の組み合わせがコンテナの機能を損なう理由がわかりませんmax-width。
Firefox / Chrome / Safari/Operaでも同じ問題が発生しています。IE6（クレイジーなもの）はいつも幸せそうです。
これも癖/標準モードに依存していないようです。
アップデート
max-width要素にが含まれている場合は無視されるように見えることを確認するために、さらにテストを行いましたfloat: left。W3Cボックスモデルの章をちらっと見ましたが、この動作についての明確な言及はすぐにはわかりませんでした。ポインタはありますか？