div table 显示动态错误消息时第 2 行无法对齐

Question

div table 使用 Contact Form 7，对齐正确。但是，当显示警告消息时，第 2 行不会一起向下移动（请参阅屏幕截图）。如何解决？

style.css:

#responsive-form{
    max-width:1140px /*-- change this to get your desired form width --*/;
    margin:0;
        width:100%;
}
.form-row{
    width: 100%;
}

.column-3, .column-4{
    font-family: 'Lato', sans-serif;
    width: 252px;
    background: #fff;
    float: left;
    padding: 20px 10px 40px;
    margin: 0 43px 32px 0;
    box-shadow: rgba(0, 0, 0, .20) 0 0 5px;
    overflow: hidden;
}
}

.column-full{
    float: left;
    position: relative;
    padding: 0.65rem;
    width:100%;
    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

html 细分：

<div class="form-row">
  <div class="column-4">
    <p>Name [text name1 size:35]</p>
    <p>Email[email email1 size:35]</p>
    <p>Mobile[text mobile1 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name2 size:35]</p>
    <p>Email[email email2 size:35]</p>
    <p>Mobile[text mobile2 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name3 size:35]</p>
    <p>Email[email email3 size:35]</p>
    <p>Mobile[text mobile3 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name4 size:35]</p>
    <p>Email[email email4 size:35]</p>
    <p>Mobile[text mobile4 size:35]</p>
  </div>
</div>
<div class="form-row">
  <div class="column-4">
    <p>Name [text name5 size:35]</p>
    <p>Email[email email5 size:35]</p>
    <p>Mobile[text mobile5 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name6 size:35]</p>
    <p>Email[email email6 size:35]</p>
    <p>Mobile[text mobile6 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name7 size:35]</p>
    <p>Email[email email7 size:35]</p>
    <p>Mobile[text mobile7 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name8 size:35]</p>
    <p>Email[email email8 size:35]</p>
    <p>Mobile[text mobile8 size:35]</p>
  </div>
</div>

Screen Show

Answer 1

尝试

display: flex

.form-row {
  display: flex;
  flex-direction: row;
}
.column-4 {
  width: 20%;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  padding: .5em;
  margin: .5em;
}

<div class="form-row">
  <div class="column-4">
    <p>Name [text name1 size:35]</p>
    <p>Email[email email1 size:35]</p>
    <p>Mobile[text mobile1 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name2 size:35]</p>
    <p style='color:red'>Error Message</p>
    <p>Email[email email2 size:35]</p>
    <p>Mobile[text mobile2 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name3 size:35]</p>
    <p>Email[email email3 size:35]</p>
    <p>Mobile[text mobile3 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name4 size:35]</p>
    <p>Email[email email4 size:35]</p>
    <p>Mobile[text mobile4 size:35]</p>
  </div>
</div>
<div class="form-row">
  <div class="column-4">
    <p>Name [text name5 size:35]</p>
    <p>Email[email email5 size:35]</p>
    <p>Mobile[text mobile5 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name6 size:35]</p>
    <p>Email[email email6 size:35]</p>
    <p>Mobile[text mobile6 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name7 size:35]</p>
    <p>Email[email email7 size:35]</p>
    <p>Mobile[text mobile7 size:35]</p>
  </div>
  <div class="column-4">
    <p>Name [text name8 size:35]</p>
    <p>Email[email email8 size:35]</p>
    <p>Mobile[text mobile8 size:35]</p>
  </div>
</div>

div table 显示动态错误消息时第 2 行无法对齐

div table row 2 cannot align when dynamic error message shown

html

css

contact-form