Question

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

CODE：

.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>

Answer 1

因为您没有正确汇总width + padding因此溢出，所以它不应超过100%

您可以使用box-sizing:border-box，因此padding和border不会干扰计算，

<强>边界框

width和height属性包括内容，padding和border，但不包括margin。这是Internet使用的盒子模型   文档处于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>

Answer 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/ 或者在ur html文件的head标签中使用此CDN。 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

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

这是我修改过的代码（使用bootstrap）..

响应2列不在顶部排队

2 个答案: