Ist es möglich, den Inhalt von Masonry.j genau zu zentrieren?

Ich versuche, ein Layout von ein bis vier Spalten zu erstellen - Variable pro Seite entworfen, mit dem Mauerwerk-Plugin. Bisher habe ich gemocht, wie es funktioniert.Ist es möglich, den Inhalt von Masonry.j genau zu zentrieren?

Allerdings ist es eine sehr nervige Lücke, die mit den Konfigurationen ich nicht loswerden kann.

Um darauf hinzuweisen - es ist bereits auf der Seite zentriert. Innerhalb des zentrierten Blocks erscheint der Inhalt jedoch linksbündig.

Der innere Inhalt hat entweder keine Ränder. Mauerwerk wird initialisiert, wie:

$('.msgblock').masonry({ 
     columnWidth: '.grid-item', 
     gutter: 8, 
     itemSelector: '.grid-item', 
     fitWidth: true, 
     resize: false 
});

ich die .msgblock Breite vollständig in CSS beseitigt haben, so wird es durch das Plugin zur Verfügung gestellt wird.

.msgblock { 
    min-height: 100%; 
    margin: 0 auto; 
    z-index: 1; 
} 

.grid-item { 
    min-height: 100%; 
    padding-top: 10px; 
}

Quelle

2017-02-20 Merlin

Versuchen Sie, die Flex-Methode:

.grid-item { 
    min-height: 100%; 
    padding-top: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

Update: die Lücke füllen Sie die stretch Option verwenden können. Hier ist eine Geige

.grid-item { 
 
    background: ghostwhite; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    display: inline-flex; 
 
    min-height: 200px; 
 
    align-self: stretch; 
 
    flex-direction: column; 
 
    flex: 1 0 auto; 
 
    outline: 1px solid #dde; 
 
} 
 

 
.grid-item:nth-child(2n+1) { 
 
    background: ghostwhite; 
 
} 
 

 
.grid-item:nth-child(2n) { 
 
    background: #eef; 
 
} 
 

 
.row { 
 
    width: 100%; 
 
    background: gray; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
}

<div class="row"> 
 
    <div class="grid-item" style='min-width:60%'>Cell 1</div> 
 
    <div class="grid-item" style='min-width:35%'>Cell 2</div> 
 
    <div class="grid-item" style='min-width:45%'>Cell 3</div> 
 
    <div class="grid-item" style='min-width:25%'>Cell 4</div> 
 
    <div class="grid-item" style='min-width:15%'>Cell 5</div> 
 
</div>

Quelle

2017-02-20 07:13:23

Kein Glück - die am weitesten rechts liegenden Lücke ist immer noch vorhanden und Inhalt zu einem hinzufügen, der andere Block wurde ... zerquetscht. Es ignoriert die Blockbreiten-Eigenschaft (dynamisch zugewiesen, aber immer noch kein Rand/Padding) – Merlin

Verwenden Sie Zeileninhalte mit gleicher Höhe? Oder wären sie auch Mauerwerk? –

Ich lege ein Raster von Spalten aus, aber innerhalb der Spalten kann der Inhalt variable Höhe haben. – Merlin

Nach einigen Recherchen und Tests, habe ich beschlossen, mit der CSS-Eigenschaft Flexbox zu gehen. Es macht, was ich brauche, ohne so viel Aufwand wie Maonry, und meine Browser-Support-Planung geht zurück für IE 11 - also sollte es eine bessere Wahl sein. Dadurch werden auch einige JS-Ladevorgänge vom System entfernt.

Quelle

2017-02-20 09:37:09 Merlin

Ist es möglich, den Inhalt von Masonry.j genau zu zentrieren?

Antwort

Verwandte Themen