Question

我想使用带有2个div的public interface Iinterface{ @GET("feeds/json/v3/attribute/"+attribute) Call<ArrayList<result>>getresult(); }来显示一个弹出窗口，第一个包含一张图片，必须在左边，第二个在表格中有一些文字，必须在右边。问题是当我为qTip1创建内部HTML时，带有文本的表总是在图片下面，而不在右边。我在stackoverflow上尝试了一些解决方案，但我想我错过了一些东西。

这是qTip生成的内部HTML的样子：

qTip

我做错了什么？

Answer 1

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

如果您想更改列的宽度，可以按以下方式向样式表添加类：

   .column25{

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

   }

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

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

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

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>

在qtip1中，2个div彼此相邻

2 个答案: