Question

使用Contact Form 7的div表格，对齐是正确的。但是，当显示警告消息时，第2行不会一起向下移动（参见屏幕截图）。怎么解决这个问题？

的style.css：

class Comment
{
    /**
     * Id.
     *
     * @ORM\Id
     * @ORM\Column(
     *     type="integer",
     *     nullable=false,
     *     options={
     *         "unsigned" = true
     *     }
     * )
     * @ORM\GeneratedValue(strategy="IDENTITY")
     *
     * @var integer $id
     */
    private $id;

    /**
     * Content.
     *
     * @ORM\Column(
     *     name="content",
     *     type="string",
     *     length=250,
     *     nullable=false
     * )
     * @Assert\NotBlank(groups={"c-default"})
     * @Assert\Length(min=3, max=250, groups={"c-default"})
     *
     * @var string $content
     */
    private $content;

    /**
     * @ORM\ManyToOne(targetEntity="User", inversedBy="comments")
     * @ORM\JoinColumn(name="user_id", referencedColumnName="id", nullable=false)
     */
    protected $user;

html段：

#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;
}

Screen Show

Answer 1

尝试

display：flex

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: