左浮动Div右侧列表项对齐异常 寻求适配动态内容的解决方案

最小复现代码 #

<div style="float:left; background-color:red;width:100px;">aa<br>bb<br>cc<br>dd</div>
<p>Title</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

当前问题：左浮动div右侧的列表项目符号无法正确对齐，期望列表项在超过左侧div高度时，能向左环绕div，同时保持项目符号与内容的正常对齐。

已尝试方案及缺陷 #

• 将<ul>的display设置为table-cell：列表整体右移，未实现内容环绕左侧元素的效果
• 给<li>添加position: relative;和left: 1em;：会影响页面中右侧可点击元素的可访问性，长列表项会出现重叠问题
• 将列表的list-style-position设为inside：当列表项内容为多行时，内容对齐会失效

需求 #

寻求适配动态内容的解决方案：无论左侧div（可替换为图片）的宽度、高度，或是列表的长度如何，都能让列表项在超过左侧元素高度时向左环绕，同时保证项目符号与内容的对齐正确。

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