1

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

问题是，我想让这个 div 框恰好位于第二个 td-tag 中图像的右侧。它不应该高于图像。因此，如果 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>

在谷歌浏览器中它运行得很好。但是在 Firefox 中，评论框不在正确的位置。它不在 td 标签中。它位于窗口的右侧。

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

感谢你们。

4

2 回答 2

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});    
});

小提琴。_

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

于 2013-11-11T21:44:23.903 回答
0

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

现场演示

在此处输入图像描述

<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;
}
于 2013-11-11T21:56:11.320 回答