Geek Answers Handbook

ZURB Foundation and the collapse of the lines

I posted a question on the ZURB forum, but I noticed that there were no answers to any posts. Since I think that this problem can arise for many others, I think it would be nice to put it on the CO as well. Here it is:

I developed a minimal example of the problem using the following markup (Edited with CLCS advices):

<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>

All CSS classes are pristine ZURB Foundation classes. The only addition relates to the class of test tables, the sole purpose of which is only to obtain a visual aid on this problem (edited also for clarity):

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

3 , . , , , , (. , , ).

[EDIT] , (Safari 7, Zurb Rails Gem 5.0.2.0) [/EDIT]

enter image description here

+4
5

, Safari % , ( , ) 1000 . Chrome Safari, 333.328px Chrome 333px Safari.

, .

+1

, , , Foundation float: right; . .

, end .

Foundation " " http://foundation.zurb.com/docs/components/grid.html#incomplete-rows

+3

Safari. width: 33.333% width: 33.333333% 4 Safari. , sass, CSS sass .

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

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

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

, css , css

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

1px . - :

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

CSS:   .border {border-right: 1px solid color-of-column;}

0

More articles: