CSSでのfloatの使い方を詳しく紹介します。

私は長い間フロートにさらされてきましたが、それについて小さなデモで話しましょう。

1: ページ レイアウトでは、2 つの p があると仮定し、要件は 2 つの p が同じ行にあることです。解決策の 1 つは、float を使用することです。

例:

<li style="border-top: 1px #CCCCCC dashed;border-bottom: 1px #CCCCCC dashed;">
                    <p class="g-position_a">职位简介</p>
                    <p class="g-position_b">
                        <dl class="g-position_list fl">
                            <dd>职位名称：php工程师</dd>
                            <dd>工作经验：1-3年</dd>
                            <dd>招聘人数：10人</dd>
                            <dd>最低学历：不限</dd>
                        </dl>

                        <dl class="g-position_list fr">
                            <dd>月薪：3000-5000元（个税计算）</dd>
                            <dd>年龄：不限</dd>
                        </dl>
                    </p>

 </li>

<p class="box" style="width:300px;height:300px;></p>

2 : 上記のコードでは、li の 2 つの p が左右に浮いている (ドキュメント フローの外にある) ため、li は「ページ プレゼンテーション」の高さを持たず、そのため li の上下の境界線が重なり合います。

li の後のクラス名は box です。p が表示されます。

現時点での解決策は、2 つの浮動サブ p の後に浮動 p を削除する p を追加することです。このとき、li の高さは "内部要素展開」がページに表示されます。 もう一度表示します。

eg:

　　　　　　　　<li>
                    <p class="g-position_a">职位简介</p>
                    <p class="g-position_b">
                        <dl class="g-position_list">
                            <dd>职位名称：php工程师</dd>
                            <dd>工作经验：1-3年</dd>
                            <dd>招聘人数：10人</dd>
                            <dd>最低学历：不限</dd>
                        </dl>

                        <dl class="g-position_list">
                            <dd>月薪：3000-5000元（个税计算）</dd>
                            <dd>年龄：不限</dd>
                        </dl>
                    </p>
                    <p class="clearfix"></p>
             </li>

CSS での float の使用法に関する上記の決まり文句は、エディターの参考になれば幸いです。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

CSS での float の使用法と関連記事の詳細については、PHP 中国語 Web サイトに注目してください。