Detaillierte Einführung in die Verwendung von Float in CSS

Ich bin schon lange mit Float vertraut. Lassen Sie uns mit einer kleinen Demo darüber sprechen.

1: Unter der Annahme, dass es zwei p im Seitenlayout gibt, besteht die Anforderung darin, dass sich die beiden p in derselben Zeile befinden. Eine der Lösungen ist die Verwendung von float,

z. B.:

<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: Der obige Code ist darauf zurückzuführen, dass die beiden ps in li nach links und rechts (heraus) schweben des Dokumentflusses), li Es gibt keine „Seitenanzeige“-Höhe, daher überlappen sich die oberen und unteren Ränder von li, und

p mit dem Klassennamenfeld nach li wird angezeigt

Die aktuelle Lösung besteht darin, ein p hinzuzufügen, das das schwebende p nach seinen beiden schwebenden Unter-p entfernt. Zu diesem Zeitpunkt wird die Höhe von li aufgrund der „internen Elementerweiterung“ erneut auf der Seite angezeigt 🎜>

zB:

　　　　　　　　<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>

Das obige Klischee über die Verwendung von Float in CSS ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie die chinesische PHP-Website unterstützen.

Eine ausführlichere Einführung in die Verwendung von Float in CSS und verwandte Artikel finden Sie auf der chinesischen PHP-Website!