并排的两个内容块

Question

我想在网站上写一些内容，然后像下面的示例一样在其旁边放置一个表格。

Example

这是我正在使用的代码：

<div id="wrapper">
<div id="block1">
<h3>Your body is a temple.</h3>

Schedule an appointment now and start living a better life.
You deserve it.
</div>

<div id="block2">
<em>*Please include correct contact information so we can get back to you.</em>
[contact-form-7 id="28921" title="Make an appointment"]
</div>
</div>

CSS：

#wrapper {
    width:1000px;
}
#block1 {
    float: left;
    width:500px;
}
#block2 {
    float: left;
    width:500px;
}

不幸的是，它显示不正确：

PIC

我已经尝试过在stackoverflow上找到的其他几种方法，但是似乎无法正常工作。如果有帮助，请访问以下站点：orlandochiropractic.org。您必须转到显示“需要帮助？”的小条。并点击“进行任命”按钮。

任何帮助将不胜感激。谢谢！

Answer 1

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.block {
  flex: 1;
  padding: 20px;
}

<div class="wrapper">
  <div class="block">
    <h3>Your body is a temple.</h3>
    <p>Schedule an appointment now and start living a better life.
  You deserve it.</p>
  </div>
  <div class="block">
    <em>*Please include correct contact information so we can get back to you.</em>
    <div>[contact-form-7 id="28921" title="Make an appointment"]</div>
  </div>
</div>

Answer 2

-x*φ(x)

Answer 3

您的问题似乎在wordpress表单类上，请看一下此元素：

Selector('h1').withText('Some text').exists

看看这种样式，它设置了<div role="form" class="wpcf7" id="wpcf7-f28921-p28210-o1" lang="en-US" dir="ltr">，只是用此样式覆盖了它：

margin-left

然后我对您的代码进行了一些修改，以适合元素视图，下面是代码：

div.wpcf7{
   margin-left: 0; //If necessary use !important
}

希望它可以解决您的问题。

Answer 4

您需要更改此CSS

div.wpcf7 {
    margin-left: 0;
}
#wrapper {
    width: 960px;
}
#block1,#block2 {
    float: left;
    width: 480px;
}
.clearfix{
    clear:both;
}

并添加

div <div class="clearfix"></div>下方的block2