HTML Divs不是两行

Question

我提到了许多与垂直对齐div相关的问题，并尝试了各种选项，包括float:left，display:block，clear: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 div上添加.firstElement。不像你现在所做的那样.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%;
}