html - HTML Divs 不是两行

Question

我已经提到了许多与垂直对齐相关的问题，div并尝试了各种选项，包括、float:left等。但没有提供所需的解决方案。display:blockclear:both

这是完整的代码http://jsfiddle.net/Lijo/8Db9A/3/。如果我将 div 的百分比保持为 98%，它工作正常。有没有办法让它在 80% 的情况下工作？

注意：我正在寻找不使用的解决方案clear

CSS

    .errorMessageDiv
    {
        width: 80%;
        display: block;
        float: left;
        clear: both;
        color: #56300a;
        overflow: auto;
        border: 1px solid #b08b34;
        padding: 0 0 0 0;
        margin: 10px 0 10px 10px;
        font-weight: bold;
    }

Answer 1

如果您希望表单显示在消息 div 下，则必须clear: left在.firstElementdiv 上添加。不像.errorMessageDiv你现在正在做的那样

Answer 2

尽管这个问题有点令人困惑，但我认为您正在寻找类似的东西，我基本上已将其删除

display: block;
float: left;

http://jsfiddle.net/8Db9A/9/

Answer 3

您的文本试图与错误消息在同一行，因为它自然是“内联”的，并且有空间可以容纳。我建议为表单的容器设置一个宽度，大到不适合 20% 的孔。这迫使它换行：

http://jsfiddle.net/8Db9A/10/

.filterElements {
  padding: 10px 5px 10px 5px;
  width: 70%;
}