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 的边距底部添加到底部：0; 文本（如：底部：-35px；但显示为底部：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

这是一个解决方案，使用 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 回答
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 回答