响应式网页中column-9列显示在column-3下方无法同行如何解决？

你需要分别调整CSS和HTML代码中的几处错误，即可实现视口≥768px时两列同行的效果： #

CSS调整 #

• 将全局盒模型声明移动到CSS代码最顶部，保证所有元素的宽高计算都包含内边距和边框，避免宽度溢出：

* {
  box-sizing: border-box;
}
/* 其余CSS代码放在这条声明之后 */

• 可选优化：给列选择器添加最小高度属性，避免空列导致的布局异常：

[class*="column-"]{
 float: left;
 padding: 2px;
 width: 100%;
 min-height: 1px;
}

HTML调整 #

• 修正菜单容器的类名错误，把col-12改为你定义的column-12，否则该容器不会应用列样式，可能撑宽左侧个人资料栏：

<!-- 修改前 -->
<div class="col-12 menu">
<!-- 修改后 -->
<div class="column-12 menu">

• 删除多余的闭合标签，保证column-3和column-9同属于外层的row容器内，浮动布局才能正常生效：
  找到column-9的闭合标签之后多出来的那个</div>，直接删除即可，调整后外层结构如下：

<div class="row">
  <div class="column-3 border-profile">
    <!-- 个人资料栏内部内容 -->
  </div>
  <div class="column-9 border-subjects">
    <!-- 课程栏内部内容 -->
  </div>
</div>

补充检查 #

确保你编写的CSS代码已经正确引入到HTML中：可以是放在<head>标签内的<style>标签中，也可以通过<link>标签引入外部CSS文件。
调整完成后，视口宽度≥768px时column-3占25%宽度、column-9占75%宽度，加起来刚好100%，就会自动排列在同一行。

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