html - 包含第二列，产品全部有序

Question

我有一个产品列表，一旦它们继续向下移动并到达侧边栏，它就会从页面左侧开始一直显示。我需要产品在开始时继续保持在右侧。

我给侧边栏和产品容器一个 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;
}

我已经把 clear:both 放在 css 的 float 之后。我会在 jsfiddle 上发布这个，但因为我使用的是 twitter bootstrap 元素，所以最好只在此处链接我的网站:

http://jordancharters.co.uk/dev/test1/products.php

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

Answer 1

将 margin-left 设置为 .col-2 等于 .col-1 的宽度:

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