4 Möglichkeiten, mit CSS eine Gleichverteilung zu erreichen-CSS-Tutorial-php.cn

In diesem Artikel werden hauptsächlich vier Möglichkeiten zur gleichmäßigen Verteilung in CSS vorgestellt. Die Gleichverteilung bezieht sich auf eine Layoutmethode, bei der untergeordnete Elemente die Breite der übergeordneten Elemente gleichmäßig verteilen kann sich beziehen auf

Gleichverteilung bezieht sich auf eine Layoutmethode, bei der untergeordnete Elemente die Breite der übergeordneten Elemente gleichmäßig verteilen. In diesem Artikel werden 4 Möglichkeiten vorgestellt, um eine gleichmäßige Verteilung zu erreichen

Idee 1: float

Nachteile: Es besteht eine Kopplung zwischen Struktur und Stil und es gibt einen Rundungsfehler im Breitenprozentwert unter IE7-Browser

【 1】 float + padding + background-clip

Verwenden Sie padding, um den Abstand zwischen Unterelementen zu erreichen, und verwenden Sie background-clip, um das padding zum Teil des Unterelements zu machen. Element zeigt den Hintergrund nicht an

CSS-CodeInhalt in die Zwischenablage kopieren

XML/HTML-Code
Inhalt in die Zwischenablage kopieren
<
p
class="parentWrap">
<
p

class
"parent"

style

background-color
: lightgrey;"

class="child" style="Hintergrundfarbe: Hellblau;"> ;1
> 🎜>p Klasse="Kind" Stil="Hintergrundfarbe: hellgrün;"> p>

3p>

4p> >

【2】float + margin + calcVerwenden Sie den Rand, um den Abstand zwischen Unterelementen zu erreichen. Verwenden Sie die Funktion calc(), um den Abstand zu berechnen Breite des untergeordneten Elements

CSS-Code

Inhalt in die Zwischenablage kopieren

XML/HTML-Code复制内容到剪贴板

1< ;/p>
p>
;2p>
p>
3p>
p>
4p>
> /
p>
p >
Nachteile: Sie müssen die vertikale Ausrichtung vertical-align festlegen und sich mit dem Lückenproblem auseinandersetzen, das entsteht, wenn Zeilenumbrüche in Leerzeichen analysiert werden. IE7 – Der Browser unterstützt das Festlegen des Inline-Block-Attributs für Elemente auf Blockebene nicht. Der kompatible Code ist display:inline;zoom:1;

【1】inline-block + Polsterung + Hintergrund-Clip

CSS-CodeInhalt in die Zwischenablage kopieren
2. XML/HTML-Code
3. <
4. class="parentWrap"
5. 
9. p
>

2p
2. 
4. 4p> 🎜>
5. p>
6. p>
【2】inline- Block + Rand + Berechnung

CSS-CodeInhalt in die Zwischenablage kopieren

XML/HTML-Code复制内容到剪贴板

;
1p>
p>
Stil="Hintergrundfarbe: hellgrün;">2p > p
>
<p
class
"child"
style="background-color : orange;"> <p
class
"in"
style="background-color: lightsalmon;">3p> p
>
<p
Klasse
"Kind"
Stil="background-color: red;"> <p
class
"in"
style="background-color: pink;">4p> p
>
p>

缺点：元素被设置为table后,内容撑开宽度。若要兼容IE7-浏览器，需要改为

结构。table-cell元素无法设置margin，设置padding及background-clip也不可行【1】table + margin负值

CSS-Code复制内容到剪贴板

XML/HTML-Code复制内容到剪贴板

;
>style="background-color: lightblue;">1p> p>
<p class
=
style="background-color: green ;"> <p Klasse
=
Stil="Hintergrundfarbe: hellgrün;">2 p> p>
<p class
=
style= "background-color: orange;">
3p>
p>
Stil="Hintergrundfarbe: rosa;">4p > p
>
p
>
p
>

CSS-Code复制内容到剪贴板

XML/HTML-Code

复制内容到剪贴板

class

"parent"
style="background-color: lightgrey;"> <p
class
"child"
style="background-color: blue;">
1p>
p>
2p >
p>
3p>
p>
4p>
p>
p>

思路四: Flex

CSS-Code复制内容到剪贴板

XML/HTML-Code复制内容到剪贴板

1p>
2p>
3p>
4 p>
p>

以上就是本文的全部内容希望对大家的学习有所帮助.

本文链接：http://www.cnblogs.com/xiaohuochai/p/5456695.html

Das obige ist der detaillierte Inhalt von4 Möglichkeiten, mit CSS eine Gleichverteilung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

css 方式

Quelle：php.cn

Vorheriger Artikel：CSS3-Tutorial: Hintergrundclip und Hintergrundursprung Nächster Artikel：Vollständige Erläuterung der Layoutattribute des Android-Layouts

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

Neueste Artikel des Autors