Question

我有两行，每行内有三个大列，只有一个在中断点上可见。我想要的是让它们在介质上彼此浮动，同时在大型上突破到不同的行并保留它们的属性（背景和高度）？另外，我希望将第二行分组为div，而不需要使用行类，因为如果该div是页脚，我会关注语义。

这是我的第一支笔，两行分开，它按预期工作但不是很理想，不允许div在介质上彼此相邻浮动： 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，以下案例2的css和html代码：

<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。第一部分只是一个普通的布局，它在大型中断，在介质上浮动： 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>

现在我不太明白你想要什么。如果中等大小浮动，并且在大屏幕上让它们（div）折叠或者你想要删除它们中的一些，因为我注意到了

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

show-for-large-up类，删除中等大小的div。

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

1 个答案: