0

次の問題があります。画像が左に浮いていて、右に余白があります。その隣には、見出しとテキストを含むdivがあります（動的に挿入されるため、両方の高さの値はわかりません）。

見出しは上に、テキストは下に揃える必要があります。テキストを絶対位置に配置するだけで十分だと思いましたが、画像の高さが見出し+テキストの高さよりも小さい場合、テキストは見出しに流れ込みます...。

テキストを一番下に配置するが、ドキュメントフローにとどまらせる解決策は見つかりませんでした。

私はテーブル要素を使用することを許可されていません（一方、display：tableなどは許可されていますが、それを使用した解決策もわかりません）

<<<HTML
<div>
    <h4>A headline, that isn't involved</h4>
    <div class="clearfix">
        <div> <!-- float left, margin-right -->
            <img>
        </div>
        <div> <!-- float left -->
            <h5>The headline aligning to the top</h5>
            <p>
                Some text aligning to the bottom
            </p>
        </div>
    </div>
</div>
HTML

私を助けてください、私は解決策を見つけることができません！

ここに画像の説明を入力してください

/編集：

画像とテキスト/見出しコンテナの両方の高さが異なる可能性があるため、固定の高さはありません。私がこれまでに得たのは（テキストが4行を超えないことを前提としています（しかし、それは最善の方法ではありません）。次の問題は次のとおりです。Firefoxは.boxのmargin-bottomをテキストの下部に追加します：0; （例：bottom：-35px;ただしbottom：0として表示; ... Chromeはそれを正しい方法で解釈します）：

<style>
    .box {
      width: 488px;
      float: left;
      margin-bottom: 33px;
      margin-right: 22px;
      padding-top: 5px;
    }

    .table {
      display: table;
    }

    .box.wide .box-content {
      display: table-row;
    }
    .box.wide .box-content > div {
      display: table-cell;
      position: relative;
      width: 233px;
    }
    .box.wide .box-content > div:first-child {
      margin-right: 22px;
    }

    .box.wide .box-content div h5 {
      padding-bottom: 88px;
    }
    .box.wide .box-content div p {
      position: absolute;
      bottom: 0px;
    }

</style>

<div class="box wide width-488">
  <div>
    <h4>Überschrift</h4>
    <div class="table">
      <div class="box-content">
          <div>
              <img alt="" height="401" width="233" src="res/dummy/233-130.jpg">
          </div>

          <div>
              <h5>Überschrift  Lorem ipsum dolor sit amet, con sectetuer adipiscing eliÜberschrift  Lorem ipsum dolor sit amet, con sectetuer adipiscing elit</h5>
              <p>
                Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lor em ipsum dolor amet.
                <a href="#">mehr</a>
              </p>
          </div>
      </div>
    </div>
  </div>
</div>
4

3 に答える 3

0

display: inline-block;フローティング要素と下部に配置するテキスト要素の両方で使用してみてください。

次に、下部に配置するテキスト要素にプロパティvertical-align: bottom;を配置します。

于 2012-10-25T13:03:59.007 に答える
0

画像の例では左の列と右の列が同じであるため、右の列を固定の高さにできると思いました。

便宜上、jsfiddle を作成しました: http://jsfiddle.net/hLPXM/

または、元のコードに基づいて、次のことを行いました。

<h4>A headline, that isn't involved</h4>
<div class="clearfix">
    <div class="left"> <!-- float left, margin-right -->
        <img src="http://placehold.it/150x350" alt="placeholder" />
    </div>
    <div class="right"> <!-- float left -->
        <h5>The headline aligning to the top</h5>

        <div class="bottom-text">
            <p>
                Some text aligning to the bottom
            </p>
        </div><!-- .bottom-text -->
    </div>
</div>

下に揃えたい.bottom-textの周りにクラスを追加したことに注意してください。<p>

これは、div が適切に浮動するための CSS などです。次の点に注意してくださいposition:relative;。

.left {float:left; margin-right:20px;}
.right {float:left; background:#eeddff; /*background to see div*/}

.left, .right {height:350px; position:relative;}

さらに重要なのは、ベースラインから始まるテキストです。

.bottom-text {
    position:absolute;
    bottom:0;
}

</p>

</p>

于 2012-10-25T13:21:55.067 に答える
0

display: table、相対および絶対配置を使用したソリューションを次に示します。

<div>
    <h4>A headline, that isn't involved</h4>
    <div style="display:table;">
        <div style="display:table-row;">
            <div style="display:table-cell;padding-right: 20px;">
                <img style="display:block" src="http://baconmockup.com/300/200">
            </div>
            <div style="display:table-cell;background:green;position:relative;vertical-align:top;">
                <p style="">Some text aligning to the top</p>
                <p style="position:absolute;bottom:0;">Some text aligning to the bottom</p>
            </div>
        </div>
    </div>
</div>​

固定の高さに依存せず、画像の高さに自動的に適応します。

jsfiddle.net/EUvXh/

于 2012-10-25T13:45:26.440 に答える