Question

使用以下代码，响应网格从一行变为三行，如果屏幕很大，我想做一行到两行，然后是3行。最好的方法是什么？在纯Css而不是bootstrap。提前感谢您的帮助。

＆＃13;

/*  SECTIONS  */
.section {
  clear: both;
  padding: 0;
  margin: 0;
}

/*  COLUMN SETUP  */
.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}

.col:first-child {margin-left: 0}

/*  GROUPING  */
.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
  width: 100%;
}

.span_2_of_3 {
  width: 66.1%;
}

.span_1_of_3 {
  width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 300px) {
  .col {margin: 1% 0 1% 0%}
  .span_3_of_3, .span_2_of_3, .span_1_of_3 {width: 100%}
}

＆＃13;

<div class="section group">
  <div class="col span_1_of_3">
    This is column 1
  </div>
  <div class="col span_1_of_3">
    This is column 2
  </div>
  <div class="col span_1_of_3">
    This is column 3
  </div>
</div>

＆＃13;

Answer 1

此代码段使用您开始使用的float方法并稍微清理一下。 Flexbox和内联块是实现响应列的其他方法，但没有最好的方法;这取决于具体情况。

您不需要列上的编号类。填充和边距百分比可能很棘手，因此我使用了5px。在容器上设置负边距意味着您不需要删除第一列或最后一列的边距。

但是容器中的空白是一个很大的问题，所以我将字体大小设置为0。

＆＃13;

;WITH Props AS
(
SELECT *,
    ROW_NUMBER() OVER (ORDER BY c,cc) AS RowNumber
FROM Location

)
select * from Props order by d desc,RowNumber

＆＃13;

Answer 2

您可以使用 Flexbox 执行此操作：

body {margin: 0}

.group {
  display: flex; /* displays flex-items (children) inline */
  flex-wrap: wrap; /* enables their wrapping */
}

.col {flex: 1} /* each 33.33% of the parent's width (3 columns) until the break at 768px */

.first {background: red}
.second {background: green}
.third {background: blue}

@media (max-width: 768px) {
  .col {flex: 0 1 50%} /* each 50% of the parent's width (2 columns) */
}

/* if you want for the third column to take the remaining space, just change the first number to 1 to enable growing/expanding of flex-items */
@media (max-width: 320px) {
  .col {flex-basis: 100%} /* each 100% of the parent's width (1 column) */
}

/* The flex property is the shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters (flex-shrink and flex-basis) are optional. Default: "flex: 0 1 auto" */

<div class="section group">
  <div class="col first">
    This is column 1
  </div>
  <div class="col second">
    This is column 2
  </div>
  <div class="col third">
    This is column 3
  </div>
</div>

我假设您正在谈论列，但如果我错了就纠正我，我会修改我的答案。

如何使1,2,3行的网格响应

2 个答案: