Question

我有一个带有两个TD标签的表。在第一个，我放置一个图像。在第二个，我放置一个“评论” - 框。它是一个div-box。

问题是，我希望在第二个td-tag中将此div框准确地放在图像的右侧。它不应该高于图像。因此，如果div中的内容过多，则应该有一个滚动条。

到目前为止，我有这个：

CSS代码：

#picKom {
    position:absolute;
    width: 350px;
    height: 100%;
    float: left;
    top: 0px;
    right: 0px;
    bottom:0px;
    overflow-y: auto;
    overflow-x: hidden;
    color: #ffffff;
    border: solid 1px #000000;
  }

和此：

        <table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"".$newWidth."px\" bgcolor=\"".$colorTwo."\">
          <tr valign=\"top\">
            <td>
              <a href=\"images/Gallerie/".$bild_name."\" target=\"_blank\"><img src=\"images/Gallerie/".$bild_name."\" width=\"".$width."\"></a>
            </td>
            <td>
              <div style=\"position:relative; height:100%;\">
                <div id=\"picKom\">
                  MYCOMMENTBOX
                </div>
              </div>
             </td>
           </tr>
         </table>

在Google-Chrome中，它运行良好。但在Firefox中，评论框不在正确的位置。它不在td-tag中。它位于窗口的右侧。

屏幕截图：http://www.pic-upload.de/view-21307692/google-chrome.png.html

谢谢你们。

Answer 1

这只是一个简单的例子，但正如我在评论中提到的，DIV应该真正用于表格的布局。这应该适合您的代码。

html：

<table>
  <tr>
    <td>
      <img src="http://lorempixel.com/output/animals-h-g-50-150-1.jpg" alt="image of kangaroo" id="mainImage">
    </td>
    <td>
      <div id="commentBox">
        Comment Box Content
        Comment Box Content
        Comment Box Content
        Comment Box Content
        Comment Box Content
        Comment Box Content
        Comment Box Content
      </div>
    </td>
  </tr>
</table>

CSS：

td { vertical-align:top; }

#commentBox {
  width:100px;
  overflow-y: auto;
  overflow-x: hidden;
  border: solid 1px #000000;
}

jQuery：

$(document).ready(function() {
    var newHeight = $("#mainImage").height();
    $("#commentBox").css({height:newHeight});    
});

fiddle。

我不确定你的表的其余部分是什么样的，但这是一个通用的布局。为图像添加ID，并确保匹配newHeight选择器中的id。设置新高度时也匹配DIV ID。不要忘记在表格单元格上进行垂直对齐，否则div将从中间开始。

Answer 2

在演示中：更改图片大小甚至调整窗口大小：

<强> LIVE DEMO

enter image description here

<div id='picKom'>

    <div id='pic'>
      <img src="http://placehold.it/680x508/f0f">
    </div>

    <div id='kom'>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p><p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing.</p><p> Software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p><p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing.</p><p> Software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

</div>

#picKom{
    max-width:800px;
    overflow:hidden;
    position:relative;
    margin:0 auto;
}
#kom{
    position:absolute;
    top:0;
    overflow-y:auto;
    height:100%;
    margin-left:65%;   /* Keep same */
}
#pic{
    width:65%;         /* Keep same */
}
#pic img{
    width:100%;
    max-height:500px;  /* Set thoughtfully */
    vertical-align:middle;
}

表中的可滚动Div-Box

2 个答案: