我基于2列布局创建了一些页面(左栏 - .nawigacja-lewa & right - .pdstr-prawa
)。当左列有很多内容时,右列中的内容会断开 - 只看文章和棕色框“O Autorze”之间的巨大差距。
它与左栏有这个CSS的事实有某种联系:
float: left;
width: 225px;
和右栏:
margin-left: 245px;
float: none;
我知道这个问题的解决方法,但我想知道是什么原因造成的。 :)
答案 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%,减去导航列的宽度。