0

<div>私は楽しみのために小さなプロジェクトに取り組んでいて、その右側に浮かぶ画像を中に入れようとして問題が発生しました<div>。問題は、コンテナ（コンテナが入っている）を無視し<div>、親ラッパーの一部であるかのように動作するように見えることです。私がしたいのは、含む要素がその中の画像に基づいて高さを調整することです...私は推測します。それをいじっていますが、運がありませんでした。

HTML：

<div class="maincontentwrapper">
    <!--First body article on page-->
    <div class="contentpane">
    <img src="images/welcomethumb_small.jpg" alt="" id="infoimg" />
            Filler text. This is the only thing that<br />
            seems to change the height of this div's<br />
            border.
</div>

    <!--Second body article on page-->  
<div class="contentpane">
    Text goes here.
</div>
</div>

表示されているすべてのクラスのCSSコード：

.maincontentwrapper {margin: 10px 333px 10px 10px;}
.contentpane {border: solid 2px red;
          margin-bottom: 10px;
              padding: 4px 4px 4px 4px;
      text-indent: 1em;}
/* Thumbnail for first article on home page.
   Margins set to push image to align ignoring the container's
   border width and padding width. */
#infoimg {float: right;
      width: 145px;
      height: 150px;
      margin: -6px -6px 4px 4px;}
/* End Main Content Styles */

編集：問題が何であるかを明確にするためにウェブサイトへのリンクが必要な場合、私は確かにそれを追加することができます。

4

1 に答える 1

0

私がしたいのは、包含要素がその中の画像に基づいて高さを調整することです

次のように、画像の下をクリアする必要があります: http://jsbin.com/iduvof/1/edit

これを行うにはいくつかの方法があります。詳細については、こちらを参照してください。

私が使用した方法は、プロパティを持つ余分な div を追加することclear: bothです。これは非セマンティック マークアップであるため、おそらくベスト プラクティスではありませんが、簡単です。

于 2012-10-16T18:55:07.503 に答える