在 qtip1 中彼此相邻的 2 个 div

Question

我想使用 2 个div 的qTip1显示一个弹出窗口，第一个包含一张图片，必须在左侧，第二个在表格中有一些文本，必须在右侧。问题是当我为qTip创建内部 HTML 时，带有文本的表格总是在图片下方而不是右侧。我已经在堆栈溢出上尝试了一些解决方案，但我认为我错过了一些东西。

这是

为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>

我做错了什么？

Answer 1

如果我理解你的问题，这应该可以。它来自我构建的 css 框架（响应者）。我删除了很多代码，因此它突出显示了您问题的解决方案。.reponsive-image类不是必需的，但我添加了它，因为您在项目中使用图像。

如果要更改列的宽度，可以按以下方式将类添加到样式表中：

   .column25{
      max-width:25%;
      width:25%:
   }

下面有一个针对 Responder 的链接，如果您需要复制它们，它已经键入了很多这些类。

链接到解决方案预览：http://codepen.io/larryjoelane/pen/OMEoMq

链接到响应程序 CSS 框架：http://codepen.io/larryjoelane/pen/XmzQba

.CSS：

/*makes an image responsive*/
.responsive-image {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* responsive container for the column classes*/
.row {
  /*set the max width of the .row class to 
  *to 100% so the columns within it do not exceed
  *a sum of 100% combined 
  */
  max-width: 100%;
  /*keeps the .row divs next each other when the screen
    resizes*/
  overflow: hidden;
}
.row div {
  /* adjust the aspect of the font
  * so it displays well and within the div elements 
  * when the screen is resized
  * 
  */
  font-size-adjust: 0.45;
  line-height: 1.5;
  /*provide some spacing in between the lines*/
  float: left;
  /*removes spacing between in line elements*/
  clear: none;
  /*removes spacing between in line elements*/
  display: inline-block;
  /*make the div elements align horizonatally*/
  /*styling below prevents padding and borders from breaking
  the max-width setting of the columns*/
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
  /*allow long words to wrap to another line*/
  word-wrap: break-word;
}

/*begin section for styling the column widths*/
.column50 {
  max-width: 50%;
  width: 50%;
}

.HTML：

<div class="row" id="infoBoxParent" style="border: 1px solid #333; overflow: auto">
  <div class="column50" id="infoBoxPicture" style="border: 1px solid green;"><img src="foo.png" alt="foo image" width="111" height="170" class="photo left" style="" /></div>
  <div class="column50" id="infoBoxFacts" style="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>

Answer 2

您可以尝试删除所有内联 css 并将以下代码放在标头中。这应该有效。

<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>