2个div在qtip1中彼此相邻

Question

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

这是为 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 并将以下代码放在 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>

Answer 2

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

如果您想更改列的宽度，您可以按以下方式将 classes 添加到您的样式 sheet：

   .column25{

      max-width:25%;
      width:25%:

   }

下面有一个 link 的 Responder，其中有很多 class 已经打出来了，如果你需要复制的话。

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

Link 响应者 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>

2个div在qtip1中彼此相邻

2 divs next to each other in qtip1

html

javascript

css

jquery

qtip