在qtip1中，2个div彼此相邻

I want to show a popup using qTip1 with 2 divs, the first one contains a picture and has to be on the left, the second one has some text in a table and has to be on the right. The problem is when I create the inner HTML for qTip, the table with the text is always under the picture and not on the right. I've tried some solutions here on * but I think I'm missing something.

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

This is what the generated inner HTML for qTip looks like:

这就是生成的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>

What am I doing wrong?

我究竟做错了什么?

2 个解决方案

#1

You could try to remove all the inline css and put the following code in the header. This should work.

您可以尝试删除所有内联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>

#2

If I am understanding your question this should work. It is from a css framework I built(Responder). I removed a lot of code so it highlights the solution to your question. The .reponsive-image class is not necessary but I added it because you are using images in your project.

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

If you want to change the width of your columns you can add classes to your style sheet in the folowing fashion:

如果要更改列的宽度,可以按以下方式向样式表添加类:

   .column25{

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

   }

There is a link below for Responder that has a lot of these classes typed out already if you need to copy them.

如果您需要复制它们,则响应者下面有一个链接,其中已经输入了很多这些类。

Link to Solution Preview: http://codepen.io/larryjoelane/pen/OMEoMq

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

Link to Responder CSS framework: http://codepen.io/larryjoelane/pen/XmzQba

链接到Responder 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>

#1