html - 右块漂浮在底部

Question

我是一个完整的新手，正在以下页面上工作：http: //mockingbirdagency.com/thebox/tvshow.html

右拉容器（用 float:right 固定右侧的块）漂浮在底部，我必须给它这个：

#pull-right-tv {
    float: right;
    margin-top: -1362px;
    width: 330px;
}

所以它会从页面顶部开始。现在每次，我修改一些东西，块移动，这是一个痛苦的屁股。有什么办法吗？我做错什么了 ？

Answer 1

稍微调整一下你的 CSS：

#pull-right-tv {
    margin-top: -1362px;  /* Delete this */
}

#pull-left {
    float: left;          /* Add this */
    width: 600px;         /* Change this from 960 to 600
                             so it won't push the other column out of the way */
}

#content {
    overflow: auto;       /* Add this so the parent retains its height
                             when its children are floating */
}

Answer 2

我要做的是将左列括在一个 div 中，就像您对右列所做的那样，然后在左列上放置一个 float:left 而不是在右列中向右浮动。至少对我来说，向右浮动的东西总是容易出错。

此外，我会非常小心地使用负边距，就像你现在所做的那样，正如你所说的那样，@$$ 很痛苦。

Answer 3

这里发生了几个问题..

1. 第 165 行 - 类“”中缺少最后一个“s”
2. 设置向左拉的宽度。
3. 将 pull-right 更改为“float:left”。虽然您可以在此处浮动到右侧，但我发现学习将元素向同一方向浮动会更好。当您开始开发响应式布局时，这将非常方便（您现在应该开始学习！）
4. 将适当的 margin-left 设置为您的 pull right 容器。

这解决了您的问题：

.pull-left {
    float: left;
    width: 610px;
}

#pull-right-tv {
    float: left;
    margin-left: 20px;
    width: 330px;
}

此外，请始终尝试在命名约定中使用一致性。例如，这些是您的主要内容容器，因此我会使用 #content 和 #sidebar 之类的东西，这样当您必须回到代码中时，它会很容易识别。

最后提到使用 ID 或 CLASS ......一个简单的经验法则是将 ID 用于任何将使用一次的东西，例如上面的 2 个选择器。所有其他在页面中多次引用的都应使用 CLASS 选择器。