1

2 つの TD タグを持つテーブルがあります。まず、画像を配置します。2 番目に、「コメント」ボックスを配置します。そのdivボックス。

問題は、この div ボックスを 2 番目の td タグの画像の右側に配置したいということです。そして、それはイメージよりも高くないはずです。そのため、コンテンツが 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タグにはありません。ウィンドウの右側に配置されます。

スクリーンショット: 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 に答える