Question

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

右拉容器（右边的块用浮子：右边）浮在底部，我不得不这样说：

#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中，就像使用右列一样，然后放置一个浮点数：左侧列，而不是右侧列中的浮点数。对于我来说，向右移动的东西总是容易出错。

另外，我会非常谨慎地使用你现在所做的负边距，因为你说这是@ $$的痛苦。

Answer 3

这里有几个问题..

第165行 - 在课程“”
设置左拉的宽度。
将pull-right更改为'float：left'。虽然你可以在这里漂浮到右边，但我发现学习将元素向同一个方向漂浮是更好的实践。当您开始开发响应式布局时，这将非常方便（您应该立即开始学习！）
将适当的边距设置为右拉容器。

这可以解决您的问题：

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

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

此外，始终尝试在命名约定中使用一致性。例如，这些是您的主要内容容器，因此我会使用#content＆amp; #sidebar所以当你必须回到代码中时，很容易识别出来。

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

右侧块浮在底部

3 个答案: