CSS框元素定位

Question

在这里，我使用css stlye创建了一个div框。

小提琴：Correct view

但如果描述很小，那么内容错位如下： Misaligned box

我尝试改变位置和css值，但没有运气。

有人可以告诉我，即使内容很小，我如何保持footer部分的位置。

Answer 1

你需要清除花车：

.footer-working-area {
    clear:both; /* this sets the element flow back to normal */
    background: transparent url(...) left 5px repeat-x; 
                                        /* /\ have some padding for the img */
}

现在页脚始终位于图片下方，无论您拥有多少文字内容。

这里有相应的modified example fiddle。

Answer 2

您可以为文字提供最小高度......

.text { min-height: 110px; }

...如果您不期望更长的文本，则为高度

.text { height: 110px; }

......或者像克里斯托夫在另一个答案中提到的那样清除花车。

Answer 3

将 clearfix 添加到.text类

.text::after {
    content: "";
    display: block;
    clear: both;
}

<强> EXAMPLE