Html 包含第二列，产品全部按顺序排列

我有一个产品列表，一旦它们继续在页面上运行，并通过侧边栏，它就会从页面左侧开始显示。我需要的产品继续留在他们的权利，因为他们开始喜欢

我给边栏和产品容器指定了col-1和col-2类，每个类都有以下内容：

    .col-1 {
    float: left;
    width: auto;
    height: auto;
    display: block;
    float: left;
}

.col-2 {
    width: auto;
    height: auto;
    display: block;
    margin-left: 20px;
}

我已经明确指出：在css中的浮动之后也是这样。我会在JSFIDLE上发布这篇文章，但由于我使用的是twitter引导元素，最好将我的网站链接到这里：

---

*更新-我需要保持宽度和高度自动，因为我将在其他页面上多次使用此类。

将

左边距设置为
。col-2
等于
。col-1
的宽度：

.col-2 {
    width: auto;
    height: auto;
    display: block;
    margin-left: 220px;
}

问题是你的左栏是向左浮动的；这意味着它右边的所有内容都将环绕该列。看看这张图片

例如，您可以尝试为这两列定义一个类

.col {
  display: block;
  float: left;
}

然后为每一个指定一个宽度（或最大宽度）：

我知道你不想对它应用宽度，但这是一种不需要一些丑陋的黑客就能得到你想要的东西的正确方法。
将这些列放入某种
.container
中也是一种很好的做法，可以为其提供clearfix以避免0高度问题：

<div class="container">
  <div class="col col-1">
    Your column 1
  </div>

  <div class="col col-2">
    Your column 2
  </div>

</div>

.container:before,
.container:after {
    content: "";
    display: table;
} 
.container:after {
    clear: both;
}
.container {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}


你的专栏1
你的专栏2
.货柜：在，
.货柜：之后{
内容：“；
显示：表格；
} 
.货柜：之后{
明确：两者皆有；
}
.集装箱{
缩放：1；/*适用于IE 6/7（触发器布局）*/
}

Clearfix方法，您可以在这里和其他任何地方找到：
简单：只需添加
溢出：隐藏至.col-2：

.col-1 {
    float: left;
    width: auto;
    height: auto;
    display: block;
    float: left;
}

.col-2 {
    width: auto;
    height: auto;
    display: block;
    margin-left: 20px;
    overflow: hidden;
}

是的，如果你知道第一列的宽度，这是最快的修复方法。你给我的建议试一试了吗？见下文…
.col-1 {
    float: left;
    width: auto;
    height: auto;
    display: block;
    float: left;
}

.col-2 {
    width: auto;
    height: auto;
    display: block;
    margin-left: 20px;
    overflow: hidden;
}