& vi. Dritte Person Singular: Boxen Plural: Boxen Präsens: Boxed Partizip Perfekt: Boxed

英[pæk] 美[pæk]

n. Paket; Karten; eine Gruppe

vt.; zu einer Gruppe zusammenfassen; festziehen

vi. Fest zusammenpacken; leicht zusammenfalten und lagern verpackt

CSS-Box-Pack-Attribut Syntax

Funktion: Gibt an, wo das untergeordnete Element platziert werden soll, wenn die Box größer als die Größe des untergeordneten Elements ist. Diese Eigenschaft gibt die horizontale Position innerhalb des horizontalen Felds und die vertikale Position innerhalb des vertikalen Felds an.

Syntax: box-pack: start|end|center|justify;

Anweisungen: start Bei einer Box mit normaler Ausrichtung wird der linke Rand des ersten untergeordneten Elements auf der linken Seite platziert (nach dem (letztes untergeordnetes Element ist der gesamte verbleibende Platz)

, für das Feld mit der entgegengesetzten Richtung wird der rechte Rand des letzten untergeordneten Elements rechts platziert (der gesamte verbleibende Platz vor dem ersten untergeordneten Element). Ende Bei normal ausgerichteten Kästchen wird die rechte Kante des letzten untergeordneten Elements rechts platziert (der verbleibende Platz vor dem ersten untergeordneten Element). Bei Kästchen mit entgegengesetzter Ausrichtung wird der linke Rand des ersten untergeordneten Elements links platziert (und der verbleibende Platz nach dem letzten untergeordneten Element). Die Mitte teilt den überschüssigen Raum gleichmäßig auf, wobei die Hälfte des Raums vor dem ersten untergeordneten Element und die andere Hälfte nach dem letzten untergeordneten Element platziert wird. justify teilt den überschüssigen Platz zwischen den einzelnen untergeordneten Elementen auf (kein überschüssiger Platz vor dem ersten und nach dem letzten untergeordneten Element).

Hinweis: Kein Browser unterstützt derzeit das Box-Pack-Attribut. Firefox unterstützt ein alternatives -moz-box-pack-Attribut. Safari, Opera und Chrome unterstützen das alternative Attribut -webkit-box-pack.

CSS-Box-Pack-Attribut Beispiel

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:350px;
height:100px;
border:1px solid black;
  
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
</style>
</head>
<body>

<div>
<p>我是居中对齐的。</p>
</div>

<p><b>注释:</b>IE 不支持 box-pack 和 box-align 属性。</p>

</body>
</html>

Instanz ausführen »

Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen