时间戳

首页 > 解决方案 > 并排的两个内容块

html - 并排的两个内容块

问题描述

我想在网站上写一些内容并在其旁边放置一个表格，如下例所示。

例子

这是我正在使用的代码：

<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。你必须去写着“需要帮助？”的地带。并点击“预约”按钮。

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

标签： htmlcss

解决方案

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

推荐阅读