ZURB Foundation und Zeilenkollaps - Zurb-Foundation, Space, Multiple-Columns, Kollaps, Grid-System

Ich habe eine Frage auf ZURBs Forum gepostet, aber ichbemerkte, dass es zu keinem Beitrag Antworten gab. Da ich denke, dass dieses Problem bei vielen anderen auftreten kann, denke ich, dass es eine gute Idee wäre, es auch auf SO zu setzen. Hier kommt es:

Ich habe ein minimales Beispiel für das Problem mit dem folgenden Markup (Bearbeitet mit CLCS Advices) erstellt:

<body>
<div class="row collapse test">
<div class="large-4 columns">
<p>Test 1</p>
</div>
<div class="large-4 columns">
<p>Test 2</p>
</div>
<div class="large-4 columns">
<p>Test 3</p>
</div>
</div>
</body>

Alle CSS-Klassen sind unberührte Klassen der ZURB Foundation. Die einzige Hinzufügung ist für die Klasse der Testtabelle, deren einziger Zweck es ist, visuelle Hilfe für das Problem zu bekommen (auch aus Gründen der Klarheit editiert):

.test div {
border: 1px solid red;
}

Die erwartete Ausgabe wäre perfekt 3 Spalteneinander berühren. Die tatsächliche Ausgabe besteht aus zwei Spalten, die sich wie erwartet berühren, aber die dritte wird etwas nach rechts versetzt, so dass ein weißer Zwischenraum zwischen der Mitte und der rechten bleibt (siehe angehängtes Bild, ebenfalls bearbeitet, aber Problem immer noch vorhanden).

[EDIT] Scheint, dass einige andere Benutzer das selbe Problem in derselben Umgebung haben (Safari 7, Zurb Rails Gem 5.0.2.0) [/ EDIT]

Bildbeschreibung hier eingeben

Antworten:

1 für die Antwort № 1

Sieht aus wie ein Rundungsproblem mit SafariBeim Konvertieren der Breite in% der Spalten endet die standardmäßige Seitenbreite (mindestens auf meiner Maschine) bei 1000 px. Beim Vergleich der berechneten Ergebnisse zwischen Chrome und Safari erhalte ich in Safari 333,328px in Chrome und 333px in Safari.

Abhängig von den übrigen Layoutanforderungen besteht die Problemumgehung darin, die Layoutbreite an eine Zahl anzupassen, die besser zu den von Ihnen benötigten Spalten passt.


3 für die Antwort № 2

Es ist eine Kombination von Rundungsproblemen, auf die andere oben hingewiesen haben, und die Tatsache, dass die Stiftung dies getan hat float: right; auf der letzten Spalte in der Zeile. Deshalb sehen Sie die Lücke zwischen der letzten Spalte und der mittleren Spalte.

Um die Lücke zu entfernen, können Sie die hinzufügen end Klasse für jede Spalte.

Sehen Sie sich die Dokumente von Foundation unter "Unvollständige Zeilen" an. http://foundation.zurb.com/docs/components/grid.html#incomplete-rows


3 für die Antwort № 3

Das Problem ist bei Rundungen von Safari. Es gibt einen Unterschied zwischen width: 33.333% und width: 33.333333% für große-4 in Safari. Um es zu lösen, verwenden Sie sass, um eigene CSS auf der Grundlage von Foundation-Sass-Dateien zu kompilieren und eine höhere Präzisionszahl zu erstellen.

Stellen Sass::Script::Number.precision = 6 in config.rb oder in Gruntfile.coffee

   sass:
options:
loadPath: ["bower_components/foundation/scss"]
sourcemap: "true"
precision: 6

dist:
files:
"css/app.css": "scss/app.scss"

0 für die Antwort № 4

Ich repariere es, indem ich der letzten Spalte css class hinzufüge, css für diese Klasse

.your_class_for_last_column { float: left !important;}
/* to fix 1px Foundation 5 bug*/

0 für die Antwort № 5

Das Hinzufügen eines Rahmens von 1px funktionierte für mich. Du könntest so etwas versuchen:

<div class="small-5 small-offset-2 columns border">
...
</div>
<div class="small-5 columns border">
...
</div>

Auf CSS: .border {border-right: 1px Vollfarbe der Spalte;}