用画布图片定位多个元素

Question

我有一个关于使用“图片”文本右侧定位多个元素的问题。情况本身在下面解释。我的问题是如何才能最好地定位元素。我已经尝试了相对定位，固定和绝对，但没有找到一个良好的功能变体。因此，问题是，是否有人可以给我一个关于如何最好地在那里进行定位的建议（应该投入相关的内容，......）

情况： 每个“部分”都包含一个<div></div>，其中包含多个元素。这些div中的每一个都包含标题文本，然后是图片部分和图片右侧的一些文本。

部件本身位于<div id="content">中（因此所有部件都是此主div的子部件，它在屏幕上水平居中并位于主菜单（相对）下方）。

图片部分是一个div，其中包含2个画布，这些画布显示在同一位置，以便在鼠标悬停时进行过渡效果。

“部分”的数量是已知的，并且div所包含的元素也不会改变。

详细图片

示例源代码

<div id="content" width="800px">
    <div id="part1">
        <span class="highlight">Headling</span>
        <div id="part1image" class="floatleft">
            <canvas height="100" width="100" id="part1image1"></canvas>
            <canvas height="100" width="100" id="part1image2"></canvas>
        </div>
        <span class="text2">Text</span>
    </div>
    <div id="part2">
        <span class="highlight">Headling</span>
        <div id="part2image" class="floatleft">
            <canvas height="100" width="100" id="part2image1"></canvas>
            <canvas height="100" width="100" id="part2image2"></canvas>
        </div>
        <span class="text2">Text<br/> Text line 2</span>
    </div>
</div>

Answer 1

这（link）是我能来的最近的。我不得不添加一个额外的包裹<div>，以确保标题不会内联。

代码摘要：

• 元素为inline-block，以确保它们符合
• .floatleft类具有相对定位，因此画布可以堆叠。它还具有固定的width和height，因为div中没有正常定位的元素。