在响应式网页中遇到我的2列问题

Question

我正在尝试响应网页设计的作业。

我们的教师希望我们使用id's制作列，并希望它们各自的宽度为40％，并且两者都为float:left并且彼此相邻。这部分工作正常，但我得到的是那些并不意味着存在的大白色间隙。

我喜欢与内容作弊。列与任何人的“创意笔记”排成一列＆＃39;专栏，我无法找出有效的方法。

您可能需要展开视图才能查看列并查看我的意思：

Link to my code

Answer 1

您可以先创建两列，例如

.left-column {
  float: left;
  width: 40%;
}

.right-column {
  float: right;
  width: 40%;
}

然后插入其他列，例如

<div class="left-column">
  <div class="column"></div>
  <div class="column"></div>
</div>

<div class="right-column">
  <div class="column"></div>
  <div class="column"></div>
</div>