浮动列会破坏其他列中的内容

时间:2015-10-07 11:51:39

标签: html css css-float margin

我基于2列布局创建了一些页面(左栏 - .nawigacja-lewa & right - .pdstr-prawa)。当左列有很多内容时,右列中的内容会断开 - 只看文章和棕色框“O Autorze”之间的巨大差距。 它与左栏有这个CSS的事实有某种联系:

float: left; 
width: 225px; 

和右栏:

margin-left: 245px; 
float: none;  

我知道这个问题的解决方法,但我想知道是什么原因造成的。 :)

Here is the link.

2 个答案:

答案 0 :(得分:0)

您正面临该问题,因为您没有为右侧部分(内容部分)设置宽度。如果您应用以下CSS,您的问题将得到解决。

.nawigacja-lewa{
    position:absolute;
    float:none;
}

.pdstr-prawa{
    float:right;
    margin-left:245px;
}

答案 1 :(得分:0)

问题出现了,因为你的一些元素已从文档流(浮动元素)中取出,而其他元素仍保留在文档流中(右列已设置为float:none;但具有浮动的子元素)

也许最简单的解决方法是从右栏中删除以下代码:

    float: none;
    margin-left: 245px;

并添加以下代码:

    float: right;
    width: calc(100% - 225px);

这会浮动侧边栏旁边的右列,并将宽度定义为其父级(blog-str)宽度的100%,减去导航列的宽度。