流動的な CSS:最大幅とオーバーフローを備えたフローティング列

StackOverflow https://stackoverflow.com/questions/2642813

  •  27-09-2019
  •  | 
  •  

質問

私はブログ用に取り組んでいる新しいテーマで流動的なレイアウトを使用しています。私はよくコードについてブログを書いています。 <pre> ポスト内のブロック。の float: left コンテンツ領域の列には max-width これにより、列は特定の最大幅で停止し、縮小することもできます。

+----------+     +------+
|   text   |     | text | 
|          |     |      |
|          |     |      |
|          |     |      |
|          |     |      |
|          |     |      |
+----------+     +------+
    max           shrunk

私が欲しいのは、 <pre> 水平スクロール バーなしで 80 文字で折り返されたコードを収められるように、要素をテキスト列よりも広くする必要があります。でも、私が欲しいのは、 <pre> コンテンツ領域の流動性に影響を与えずに、要素をコンテンツ領域からオーバーフローさせます。

+----------+     +------+
| text     |     | text | 
|          |     |      |
+----------+--+  +------+------+
| code        |  | code        |
+----------+--+  +------+------+
|          |     |      |
+----------+     +------+
    max           shrunk

しかし、 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>

次のいずれかを実行すると、流動性が戻ることに気付きました。

  1. を削除します。 <pre> (そうですか...)
  2. を削除します。 float: left

私が現在使用している回避策は、 <pre> 要素が投稿列の「区切り」に分割されるため、投稿セグメントの幅と <pre> セグメントは相互に排他的に管理されます。

+----------+     +------+
| text     |     | text | 
+----------+     +------+
+-------------+  +-------------+
| code        |  | code        |
+-------------+  +-------------+
+----------+     +------+
+----------+     +------+
    max           shrunk

しかし、これにより追加の開閉を挿入する必要があります <div> 要素をポストマークアップに追加しますが、意味的にはそのままにしておきたいと思います。

確かに、私はボックス モデルがオーバーフロー コンテンツを含むフロートでどのように機能するかを完全には理解していません。そのため、なぜ次の組み合わせが使用されるのか理解できません。 float: left コンテナと <pre> その内側で障害を起こす max-width コンテナの。

Firefox/Chrome/Safari/Opera でも同じ問題が発生しています。IE6 (クレイジーなやつ) はいつも幸せそうに見えます。

これは、quirks/standards モードにも依存していないようです。

アップデート

それを観察するためにさらにテストを行いました max-width 要素に float: left. 。W3C ボックス モデルの章に目を通しましたが、この動作についての明示的な言及はすぐには見つかりませんでした。何かヒントはありますか？

役に立ちましたか？

解決

それは可能な限り少ない水平スペースとして占有作ると同時にmargin-right: -240px; float: left;と親<pre>要素をオーバーフローする可能性<div>要素の

を設定240px。 <p>要素のクリアが両側（clear: both）上の要素を浮動ていることを確認することを忘れないでください。以下の完全な例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Solution</title>
    </head>
    <body>
        <div style="float: left; background-color: cyan; max-width: 460px;">
            <p style="background-color: magenta; clear: both;">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
            <pre style="float: left; max-width: 700px; 
                background-color: yellow; margin-right: -240px;">
function foo() {
    // Lorem ipsum dolor sit amet, consectetur adipisicing elit
}
            </pre>
            <p style="background-color: magenta; clear: both;">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
        </div>
    </body>
</html>

他のヒント

私は、これはあなたが探しているものを行うべきだと思いますが、あなたはその場で仕事にそれを得るために、わずかにそれを微調整する必要があるかもしれません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Test</title>
        <style type="text/css" media="screen">
            body
            {
                margin: 0;
                padding: 0;
            }
            #wrapper
            {
                float: left;
                width: 100%;
            }
            #content
            {
                float: left;
                width: 100%;
                max-width: 500px;

                margin: 0;
                padding: 0;

                font-family: "Trebuchet MS", sans-serif;
                font-size: 12px;
            }
            #content-pad
            {
                margin: 50px;
                padding: 50px 0 40px 50px;
                background-color: #CCC;
            }

            p, pre
            {
                margin: 0 50px 10px 0;
                line-height: 1.6em;
            }

            pre
            {
                padding: 20px;
                width: 560px;

                background-color: #333;
                color: #FFF;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">
                <div id="content-pad">
                    <p>Fusce euismod nunc vitae orci vestibulum adipiscing. Nam id quam libero, sed convallis elit. Etiam interdum, urna et imperdiet euismod, nisi erat commodo elit, sed convallis magna est quis sem. Fusce tempor aliquet est, et ornare eros vulputate et. Vivamus arcu augue, pretium vel fermentum in, gravida sed elit. Vestibulum ut ligula ac quam hendrerit ullamcorper. Phasellus id justo augue. Integer a eros ante. Vivamus sapien mi, placerat a viverra pharetra, dignissim sit amet ipsum. Fusce nunc nunc, tempus ut aliquet sit amet, consectetur sed quam. Cras ligula enim, bibendum eget luctus a, convallis sit amet nisl. Nullam in quam in lectus faucibus lobortis vel pulvinar ante.</p>
                    <pre>Here is some code!
We're going to make sure that it has a full eighty characters to play in.
12345678901234567890123456789012345678901234567890123456789012345678901234567890</pre>
                    <p>Nullam in sapien vitae dui tincidunt elementum. Curabitur condimentum vulputate sem ornare pharetra. Fusce in dolor eget neque viverra sagittis a a orci. Vivamus blandit leo eget orci viverra quis hendrerit velit tempus. Donec in erat risus. Nullam scelerisque faucibus ante, ultricies tristique dolor laoreet sit amet. Duis sit amet tortor dolor, vel interdum ipsum. Sed sed nibh vel ipsum commodo cursus. Proin fermentum nunc in velit tincidunt imperdiet sit amet nec neque. Suspendisse neque ante, luctus sit amet pulvinar eu, congue laoreet magna. Aenean sit amet porttitor quam. Mauris hendrerit vulputate tempus. Curabitur mauris magna, laoreet congue rutrum condimentum, condimentum in sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </div>
            </div>
        </div>

        <!-- this next element just maintains the margin properly -->
        <div style="clear:both; height: 0; overflow: hidden;"></div>
    </body>
</html>

CSSます：

pre {
    display: inline-block;
}

私は、それはまた、オペラ、SafariとIE8少なくとも上で動作すると思いますChromeとFirefoxのための作品、ます。

この休憩IE6は、ブラウザからルールを隠すために、このセレクタを使用することができた場合：

div > pre {
    display: inline-block;
}
（余分な文字を追加して）あなたの例では、

<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; display: inline-block;">
function foo() {
    // Lorem ipsum dolor sit amet, consectetur adipisicing elit dfsf sdf sdf sdf sdf
}
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>

このかもしれない作業

pre {
  position:relative;
  float:left;
  z-index: 1;
}

の相対位置は、事前に文書フローからそれを除去することなく、カラムの寸法「飛び出す」、及びフロートは、そのすべての内容を含むためTEH事前の幅を調整すべきであることができる。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top