响应式 2 列不在顶部排列答案

【问题标题】：responsive 2 columns don't line up at top响应式 2 列不在顶部排列
【发布时间】：2017-01-19 00:04:46
【问题描述】：

我想创建一个简单的 2 列响应式页面 - 没有页脚或页眉，只有列。当我使用下面的代码时，右列从第一列的下方和右侧开始。当然，我错过了一些简单的东西——对于响应式设计的新手来说，这并不是一件难事。（顺便说一句，列的长度与此示例中的不同。）

代码：

.container {
  max-width: 100%;
}
.lcol {
  float: left;
  padding: 1%;
  width: 33%;
  top: 0;
}
.rcol {
  float: right;
  padding: 1%;
  width: 65%;
  top: 0;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 480px) {
  .lcol,
  .rcol {
    float: none;
    width: auto;
  }

<div class="container">
  <div class="lcol">
    ---contentLEFT--- Lorem ipsum dolor sit amet,
  </div>

  <div class="rcol">
    ---contentRIGHT--- Lorem ipsum dolor sit amet,
  </div>
</div>
<div class="clearfix"></div>

【问题讨论】：

你看到我的评论了吗？

标签： html css responsive-design

【解决方案1】：

因为你没有正确总结width + padding，因此溢出，它应该不超过100%

您可以使用box-sizing:border-box，这样padding 和border 就不会干扰计算，

边框

width 和 height 属性包括内容，padding 和 border，但不包括 margin。这是互联网使用的盒子模型文档处于 Quirks 模式时的资源管理器。请注意padding 和 border 将在框内，例如.box {width: 350px; border: 10px solid black;} 导致在width: 的浏览器中呈现一个框 350px.内容框不能为负数，下限为0，使得无法使用border-box 使元素消失。

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
.container {
  max-width: 100%
}
.container > div {
  float: left;
  padding: 1%;
  border: 1px dotted red;
}
.lcol {
  width: 35%;
  background: lightgreen
}
.rcol {
  width: 65%;
  background: lightyellow
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 480px) {
  .lcol,
  .rcol {
    float: none;
    width: auto;
  }
}

<div class="container">
  <div class="lcol">
    ---contentLEFT--- Lorem ipsum dolor sit amet,
  </div>

  <div class="rcol">
    ---contentRIGHT--- Lorem ipsum dolor sit amet,
  </div>
</div>

【讨论】：

谢谢！忘了填充会在两边！
我还需要到 15 岁才能公开接受答案。

【解决方案2】：

.left{
  background-color:red;
  height:50vh;
}
.right{
  background-color:green;
  height:50vh;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="col-md-3 col-xs-3 col-sm-3 left">
    This is the left column.
    </div>
  <div class="col-md-9 col-xs-9 col-xs-9 right">
    This is the right column.
  </div>
</div>

由于您是响应式设计的新手，我建议您使用 Bootstrap。使用它提供的列方法管理对齐非常容易。您可以从此处下载 Bootstrap。 http://getbootstrap.com/getting-started/ 或者在你的 html 文件的 head 标签中使用这个 CDN。 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

您还可以从 www.w3schools.com 学习基础知识。

这是我修改的代码（使用引导程序）..

【讨论】：