Heim > Web-Frontend > CSS-Tutorial > Detaillierte Einführung in die Verwendung von Float in CSS

Detaillierte Einführung in die Verwendung von Float in CSS

高洛峰
Freigeben: 2017-03-07 14:07:44
Original
1745 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren


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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage