基础不同行内的 5 个中间列彼此相邻

Question

我有两行，每行内有三个大列，只有一列在中等断点处仍然可见。我想要的是让它们在介质上彼此相邻浮动，同时在大屏幕上分成不同的行并保留它们的属性（背景和高度）？此外，我希望第二行分组在 div 中，不需要与行的 class 分组，因为如果 div 是页脚并且我关心语义怎么办。

这是我的第一支笔，两行分开，它按预期工作但不理想，不允许 divs 在介质上彼此相邻浮动： two separate rows, case one html 和 css 对于情况一：

    <body>
        <div class="row">
        <div class="biggest columns large-4 show-for-large-up">row1 height100</div>
        <div class="average columns medium-6 large-4">row1 height50</div>
        <div class="smallest columns large-4 show-for-large-up">row1 height25</div>
      </div>
        <div class="row">
        <div class="biggest columns medium-6 large-4">row2 height100</div>
        <div class="averge columns large-4 show-for-large-up">row2 height50</div>
        <div class="smallest columns large-4 show-for-large-up">row2 height25</div>
      </div>
     </body>



 /* css for case no.1 */


        .row:first-of-type{background:red;}
        .row{background:blue;}

       /* different height for divs inside row */
        .biggest{height:100px;}
        .average{height:75px;}
        .smallest{height:50px;}

这是2号笔： row inside row, second case，以下 css 和 html 案例 2 的代码：

<body>
        <div class="row">
          <div class="biggest columns large-4 show-for-large-up">row1 height100</div>
          <div class="average columns medium-6 large-4">row1 height50</div>
          <div class="smallest columns large-4 show-for-large-up">row1 height25</div>
          <div class="row">
           <div class="biggest columns medium-6 large-4">row2 height100</div>
          <div class="averge columns large-4 show-for-large-up">row2 height50</div>
        <div class="smallest columns large-4 show-for-large-up">row2 height25</div>
        </div>
      </div>
     </body>

css from code no.2 remains the same like in first example:

    .row:first-of-type{background:red;}
    .row{background:blue;}

    /* different height for divs inside row */
    .biggest{height:100px;}
    .average{height:75px;}
    .smallest{height:50px;}

第二个示例部分正确。在中等大小的代码上工作正常（元素的高度得到尊重，但在大尺寸基础上有 .row .row 的规则，它增加了负边距，但更大的问题是浮动元素的垂直对齐优先于水平对齐显示我的内排很丑。我该如何解决这个问题？

Answer 1

为了简单起见，我删除了蓝色 div。第一部分只是一个普通的布局，它在 large 上中断，在 medium 上浮动： http://codepen.io/zlajaa1/pen/qdWLmd

<body>
    <div class="row">
        <div class="biggest columns medium-4 large-12">row1 height100</div>
        <div class="average columns medium-4 large-12">row1 height50</div>
        <div class="smallest columns medium-4 large-12">row1 height25</div>
      </div>
</body>

现在我不太明白你在这里想要什么。如果中号浮动，并且在大屏幕上让它们 (divs) 折叠或者你想删除其中的一些，因为我注意到

<div class="averge columns large-4 show-for-large-up">row2 height50</div>

show-for-large-up class，删除中等尺寸的 divs。

基础不同行内的 5 个中间列彼此相邻

foundation 5 middle columns inside different rows next to each other

css

zurb-foundation

基础 不同行内的 5 个中间列彼此相邻

foundation 5 middle columns inside different rows next to each other

css

zurb-foundation

基础不同行内的 5 个中间列彼此相邻