如何用两个不同的div实现两种背景色的融合效果？

• 期望实现效果：两个不同背景色的div横向排列（蓝色、棕色分别为独立div）
  
• 当前实现效果：两个div纵向堆叠
  
• 现有代码：

<div style="padding:10px;height:65px;border-radius:10px;background-color:#0099FF;">4 pm</div>
<div style="padding:10px;height:65px;border-radius:10px;background-color:#8B5E3C;">2 pm</div>

div默认是块级元素，会独占一行，要实现横向排列，可采用以下几种常用方案：

方案1：Flexbox（推荐） #

给两个div的父容器添加display: flex属性，同时可设置间距、对齐方式：

<div style="display: flex; gap: 10px;">
  <div style="padding:10px;height:65px;border-radius:10px;background-color:#0099FF;">4 pm</div>
  <div style="padding:10px;height:65px;border-radius:10px;background-color:#8B5E3C;">2 pm</div>
</div>

• gap: 10px用于设置两个div之间的间距，可按需调整数值。

方案2：inline-block #

给每个div添加display: inline-block属性，同时处理标签换行产生的间隙（可去掉div间换行，或给父容器设font-size: 0）：

<div style="padding:10px;height:65px;border-radius:10px;background-color:#0099FF;display: inline-block; margin-right: 10px;">4 pm</div><div style="padding:10px;height:65px;border-radius:10px;background-color:#8B5E3C;display: inline-block;">2 pm</div>

• margin-right: 10px用于设置两个div的间距。

方案3：Float #

给每个div添加float: left属性，同时在父容器中清除浮动，避免高度塌陷：

<div style="overflow: hidden;">
  <div style="padding:10px;height:65px;border-radius:10px;background-color:#0099FF;float: left; margin-right: 10px;">4 pm</div>
  <div style="padding:10px;height:65px;border-radius:10px;background-color:#8B5E3C;float: left;">2 pm</div>
</div>

• overflow: hidden是清除浮动的简便方式，也可通过伪元素实现更通用的清除效果。

内容的提问来源于stack exchange，提问作者Anthony Cuartero