ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでのfloatの使い方を詳しく紹介します。

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

高洛峰
高洛峰オリジナル
2017-03-07 14:07:441724ブラウズ

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

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 サイトに注目してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。