html - canvas图片定位多个元素

Question

我有一个关于使用“图片”右侧的文本定位多个元素的问题。情况本身在下面解释。我的问题是如何才能最好地定位元素。我尝试了一些相对定位、固定定位和绝对定位，但没有找到一个功能良好的变体。因此，问题是是否有人可以给我一个建议，告诉我如何最好地在那里定位自己(什么应该放在相对位置，....)

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

零件本身位于 <div id="content"> 中他们自己(因此所有部分都是这个主 div 的子级，它在屏幕上水平居中并位于主菜单(相对)下方)。

图片部分是一个div，里面有2个 Canvas ，显示在同一个位置，可以实现mouseover的过渡效果。

“部分”的数量是已知的，组成 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类具有相对定位，因此 Canvas 可以堆叠。它还有一个固定的 width和 height因为 div 中没有元素位置正常。