如何实现两个div并排显示，第一个居左第二个居右

你可以通过以下两种CSS方案实现类为snippet的div居左、类为location的div居右的并排效果，更推荐使用Flex布局方案，适配性更强且无需处理额外的布局问题。

• 推荐方案：Flex布局
  首先需要给两个div套一个共同的父容器，结构如下：

<div class="form-location-wrapper">
  <div class="snippet">
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
    <script>
          hbspt.forms.create({portalId: "4801849",formId: "b021b49f-c504-4b1d-ad2b-1bb9e587287c"});
    </script>
  </div>

  <div class="location">
    <strong>Our Locations</strong>
    <p>Mumbai</p>
    <p>Inventrom Private Limited, Unit no. B 32-A, B-wing, 2nd Floor, Raj Industrial Complex, Military Road, Marol, Andheri East, Mumbai, Maharashtra-400059</p>
    <p>Goa</p>
    <p>Inventrom Private Limited, 10, Gaspar Apartment, behind Suzuki showroom, Panjim, Goa-403001, Near People's High School</p>
    <p></p>
    <strong>Contact Us</strong>
    <p>79, 11th Cross Rd, Binnamangala Indiranagar, Bengaluru, Karnataka-560038, India</p>
    <p>(+91) 8881197198</p>
    <p>contactus@boltiot.com</p>
  </div>
</div>

添加对应的CSS样式即可：

/* 父容器样式 */
.form-location-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 24px; /* 两个模块的间距可自定义调整 */
  width: 100%;
  box-sizing: border-box;
}

/* 两个子容器样式 */
.snippet, .location {
  box-sizing: border-box;
  width: 48%; /* 各占近一半宽度，可根据实际需求调整占比 */
}

• 备选方案：浮动布局
  如果需要兼容极低版本浏览器，可以使用浮动方案，CSS代码如下：

.snippet {
  float: left;
  width: 48%;
  box-sizing: border-box;
}

.location {
  float: right;
  width: 48%;
  box-sizing: border-box;
}

/* 父容器清除浮动，避免高度塌陷 */
.form-location-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

两种方案的宽度、间距数值都可以根据你的页面实际布局需求自行调整。

内容的提问来源于stack exchange，提问作者K F Azmath Ulla