布局问题求助：779px及以上尺寸下多列响应式布局实现

嘿，我懂你现在的烦恼——浮动布局有时候确实会因为清除浮动或者宽度设置的小细节卡壳，咱们一步步把它搞定：

核心思路 #

你已经给.col加了左浮动，要实现779px及以上的目标布局，关键要做两件事：

• 给.primary和.secondary设置合适的宽度，让它们能并排显示
• 让.tertiary清除浮动，强制它换行并占满整行宽度

具体代码实现 #

首先推荐给所有元素加上box-sizing: border-box，这是布局的基础好习惯，能避免padding、边框导致元素宽度溢出：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  /* 调试用的边框可以保留，方便你看容器范围 */
  border: 1px solid #ccc;
}

.col {
  float: left;
  padding: 1rem; /* 加些内边距让内容更美观 */
}

/* 针对779px及以上屏幕的媒体查询 */
@media (min-width: 779px) {
  .primary, .secondary {
    /* 这里设50%宽度刚好并排，要是需要留间隙可以调整，比如48%+1%左右margin */
    width: 50%;
  }
  
  .tertiary {
    /* 清除左右浮动，强制换行 */
    clear: both;
    width: 100%;
  }
}

更现代的替代方案（推荐） #

如果不需要兼容特别老旧的浏览器，用Flexbox布局会更省心，不用处理清除浮动的问题：

.wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.col {
  padding: 1rem;
}

@media (min-width: 779px) {
  .primary, .secondary {
    flex: 0 0 50%; /* 固定占50%宽度，不拉伸不收缩 */
  }
  
  .tertiary {
    flex: 0 0 100%; /* 占满整行宽度 */
  }
}

这两种方案都能实现你要的效果，Flexbox代码更简洁，也更符合现代布局的最佳实践~

内容的提问来源于stack exchange，提问作者Thomas Hewitt