Mauerwerk - Spaltenbreite Prozent + Dachrinne

Warum kann ich nicht zeigen, 4 Elemente, indem Sie Zeile, wenn Sie die Breite eines jeden 25% und die Dachrinne param ist 10? Bitte helfen Sie mir!

$('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 10
});

http://codepen.io/davelins/pen/bdoRGa

InformationsquelleAutor Dave Lin | 2015-06-19
  1. 19

    Ändern 

    .grid-item {
  width: calc(25%);
}

    zu 

    .grid-item {
  width: calc(25% - 10px);
 }
    • Es funktioniert nicht
    • bei mir hat es geklappt codepen.io/anon/pen/aOLxwW
    • Mein schlechtes! Funktioniert einwandfrei! Danke!
    • Du bist Magie ! gerne geben Ihnen die 10 upvote 🙂
    • Funktioniert einwandfrei. Ich weiß nicht, wie, aber Sie funktioniert! Danke!
    • In deinem Beispiel, es gibt auch eine "Dachrinne" ganz Links, wo es sollte nicht sein meiner Meinung nach

    InformationsquelleAutor Samir
  2. 2

    Akzeptiert die Antwort oben ist nicht pixel-perfekt. Wenn Sie sehen, dass der Stift http://codepen.io/anon/pen/aOLxwW sehen Sie die Rinne ganz rechts, das ist wahrscheinlich nicht das, was Sie wollen, zumindest nicht das, was ich will. Das ist aufgrund der Element-Breite berechnet wird, zu klein mit

    .grid-item {
  width: calc(25% - 10px);
}

    Sollte es in der Tat calc(25% - 7.5px). Die Formel für die wäre es 

    //pseudocode to illustrate the idea. how you would do that dynamically whould be up to the language you choose (e.g. php, js...)
$number_of_cols = 3; //for example
$column_width = 100 / $number_of_cols; //a float value, e.g. 33.33333333 in this example
$item_width_diff = $gutter * ($number_of_cols - 1) / $number_of_cols; //in this example: 10*2/3 = 6.6666666

    dann in der css-Sie hätte

    .grid-item {
  width: calc(25% - $item_width_diff);
}

    https://codepen.io/anon/pen/YjPvbL

    • Das ist perfekt. Was ist es über das Mauerwerk, die Ausgabe, die wir haben, dies zu tun? Die absolute Positionierung von raster-Elemente?
    InformationsquelleAutor niklas
  3. -2

    Nur normalisieren, css, bevor du deine eigenen css-HTML-element. Und es wird funktionieren. Es ist hinzufügen-Marge von div geerbt, css.

    • Es funktioniert nicht.
    InformationsquelleAutor KnightIn
Schreibe einen Kommentar