ホームページ > 記事 > ウェブフロントエンド > 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 サイトに注目してください。