我的两列都堆积在Zurb中。 如何并排显示它们？

Question

I want to have two columns, however they seem to want to be stacked on top of each other. I am using the latest download. Why is the grid not gridding?

    <link rel="stylesheet" href="/assets/css/foundation.min.css">
    <link href='/assets/css/foundation-icons.css' rel='stylesheet' type='text/css'>
    <link href='/assets/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="/assets/css/app.css">

        <div class="row">
                <div class="small-12 large-6 columns" style="border:solid 2px black">
                        <p>This is</p>
                </div>

                <div class="small-12 large-6 columns" style="border:solid 2px red">
                        <p>not a love song</p>
                </div>

        </div> <!-- end of row -->

<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/foundation.min.js"></script>
<script src="/assets/js/what-input.js"></script>
<script src="/assets/js/jquery.dataTables.min.js"></script>
<script src="/assets/js/app.js"></script>

Answer 1

The complete zipped version of Foundation uses the new(ish) XY-Grid by default. The syntax is different than the Float Grid and Flex Grid, which are somewhat interchangeable. Most notably, with the XY-Grid, instead of "row", you use "grid-x" and instead of "column", you use "cell". If you want to use the float grid or the flex grid, you have to select that option before downloading the zip file from the download page. The grid options are near the top of the page. In the doc, the grids are explained in the "General" section. Flex Grid and XY-Grid have more limited browser support.

Answer 2

large-6 + 2px > 50% so the boxes never will float. Give the a BG color or use outline insted of border.