GitHub などで見られるようなスタイル付きのコード ブロックを作成するために、CSS を pre code セレクターに適用します。レイアウトに Flexbox を使用しており、「ボックス」 div 内に 2 つの「パネル」 div を並べて配置しており、そのうちの 1 つにはコード ブロックがあります (これは <pre><code> 内のコードにすぎません)。 タグ) であり、「ボックス」 div はメインの「コンテナ」 div 内にあります。
私が持っている基本的なCSSは...
リーリーflex: 0.5 であるため、両方のパネルの幅は同じである必要がありますが、ブロックがパネルに合わせて縮小するのではなく、右側のパネルがブロックに合わせて拡張します。
pre code で white-space: pre-wrap を設定すると、望ましいレイアウト動作が得られますが、当然ながらコードは折り返されます。これは望ましくないことです。
もちろん、
を使用し、専用の幅を pre コード に追加すると、コード ブロックに水平スクロールバーが表示される望ましい動作が得られます。ブロックを内部にパネルを収める必要があるため、専用の幅を使用することはできません。
何らかの理由で、プレコード で width: 100% を設定してもまったく効果がありません。
https://codepen.io/evprkr/pen/poKQXJr
P粉6210339282024-04-02 11:59:47
CSS の問題問題が発生している原因:
.*, *:before, *:after { } の最初の行に、見落としがちな最初の . (ドット) があります。したがって、border-box モデルは、:before および :after 擬似要素でのみ機能します。どうやら、margin と padding にも同じことが当てはまります。 .panel 先祖には width 値セットがないため、flexbox は子要素を制約できず、無限に大きくなります。 flex: 0.5 (デフォルトは flex: 0.5 1 0%) は、幅 flex-basis:50% がないため、明らかに効果がありません。どちらの場合も、pre code はオーバーフローをトリガーしないため、スクロール可能なボックスは表示されません。理由は説明できませんが、おそらく W3C の仕様によるものでしょう。ただし、.panel width: 50% の宣言により、最終的に問題は解決されました。 margins をさまざまな要素および gap と組み合わせて使用すると、ブラウザ/コードペンのサイズを変更するときに、要素の予期せぬ重なりが生じる可能性があります。上記先頭の.広告 1) .
(クリック).container width: 100% を指定して、
ad 3) .panel flex: 0.5 を削除し、gap は .panel の合計幅を増やし、サイズ変更時に重複する可能性があるため、calc(..) が必要です。 ngap: 1rem は 2 つの列のそれぞれに 0.5rem を追加するため、各列の width からその値を減算する必要があります。
4) ngap と同様、margincalc(..) を追加しないようにする最も簡単な方法は、要素の margin をその直接の親の padding に移動することです。すべてのケースに当てはまるわけではありませんが、この場合は全体のレイアウトを変更しなくてもうまく機能します。
＃＃＃＃＃＃ボーナス＃＃＃＃＃＃
.box
がその子要素をラップできるようにします必要最小限の .panel 幅
を設定して、.panel を強制的にラップします。この場合は
これは、ラップを解除したときに .panel 要素を完全な 50% まで拡張できるようにするために必要です。
読みやすくするためにテキストを編集します...
＃＃＃＃＃＃断片＃＃＃＃＃＃