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;
}

我已经明确表示：两者都在 css 中浮动之后。我会在 jsfiddle 上发布此内容，但由于我使用 twitter 引导元素，最好只在此处链接我的网站：

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;
}

Answer 2

问题是您的左列向左浮动；这意味着它右侧的所有内容都将包裹该列。看看这张图片。

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

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

然后给每个宽度（或最大宽度）：

.col-1{
  max-width: 300px;
  // or width: 33%;
}
.col-2{
  max-width: 660px;
  //or width: 66%;
}

我知道您不想对其应用宽度，但这是在没有一些丑陋的黑客的情况下获得所需内容的正确方法。.container将这些列放入某种形式中以明确修复以避免 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) */
}

您可以在此处和其他任何地方找到 Clearfix 方法：http: //css-tricks.com/snippets/css/clear-fix/

Answer 3

简单：只需添加overflow: hidden;到 .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;
}