javascript - qtip1中彼此相邻的2个div

我想显示一个使用qTip1和2 div的弹出窗口，第一个包含图片，并且必须在左侧，第二个包含表格中的文本，并且必须在右侧。问题是当我为qTip创建内部HTML时，带有文本的表格始终在图片下方，而不在右侧。我在这里尝试过一些关于stackoverflow的解决方案，但是我想我缺少了一些东西。

这是为qTip生成的内部HTML的样子:

<div id="infoBoxParent" style="margin: 20px 20px 0 0; border: 1px solid #333; overflow: auto">
    <div id="infoBoxPicture" style="float: left; border: 1px solid green;"><img
            src="foo.png"
            alt="" width="111" height="170" class="photo left" style="float: left;"/></div>
    <div id="infoBoxFacts" style="float: right; border: 1px solid red; overflow: hidden">
        <table>
            <tr>
                <td style='padding:5px;text-align:left;'>Some Text:</td>
                <td style='padding:5px;text-align:right;'>Stack Overflow is a question and answer site for professional
                    and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A
                    sites. With your help, we're working together to build a library of detailed answers to every
                    question about programming.

                </td>
            </tr>
        </table>
    </div>
</div>

我究竟做错了什么？

最佳答案

您可以尝试删除所有内联css，然后将以下代码放在 header 中。
这应该工作。

<style>
   #infoBoxParent {
    margin: 20px 20px 0 0;
    border: 1px solid #333;
    overflow: auto;
    width: 100%;
    }
    #infoBoxParent div {
    position: relative;
    float: left;
    border: 1px solid;
    }
    #infoBoxPicture{
    border-color: green;
    width: 30%;
    }
    #infoBoxFacts{
    border-color: red;
    width: 68%; /* 2% margin for the lines */
    }
</style>

关于javascript - qtip1中彼此相邻的2个div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35114459/