Question

昨天我已经要求一种解决方案，可以在飞机上绘制一种机翼（用于座位图）。这个问题（以及它的“解决方案”）可以在这里找到： Building a seatmap with kind of wings for the plane

我们得到了一个解决方案，但现在我看到了下一个问题：只要内容足够小以至于机舱不能滚动，就可以了。但是一旦我有这么多的座位行，内容开始滚动，翅膀就必须随着座位一起移动。他们不应该留在他们原来的地方，因为顾客知道他的座位是否会在飞机的机翼上是非常重要的。

见小提琴： http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/26/

<div id="seatmap">
    <div id="plane">

        <table class="rows">
            <tr><th>E</th></tr>
            <tr><th>D</th></tr>
            <tr><th></th></tr>
            <tr><th>C</th></tr>
            <tr><th>A</th></tr>
        </table>


        <div id="cabin">        
            <table>
            <tr class="wingRowTop">
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="wingSeat"></td>
                <td class="wingSeat"></td>
                <td class="wingSeat"></td>
                <td class="wingSeat"></td>
                <td class="wingSeat"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
            </tr>
[...]

任何想法如何使翅膀更灵活（可滚动）！请注意，平面的尺寸不固定，平面可以有更多或更少的行。

Answer 1

我认为您无法使用当前代码创建该形状，因为您在父级上隐藏了溢出。你必须完全重新设计它。

座位图有一种翅膀 - 重新打开

1 个答案: