Question

我有以下问题：左边有一个图像，右边有一个边距。旁边有一个包含标题和文字的div（我不知道两者的任何高度值，因为它会动态插入）。

标题必须与顶部对齐，文字必须与底部对齐。我认为将文本定位为绝对足够，但如果图像的高度小于标题+文本的高度，则文本会流入标题....

我还没有找到任何解决方案来将文本置于底部，但让它保留在文档流程中。

我不允许使用任何表格元素（另一方面，显示：表格等是允许的，但我也没有找到任何解决方案）

<<<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

请帮助我，我无法找到任何解决方案！

enter image description here

/编辑：

这两个内容＆＃39;和text- / headline-containers＆＃39;高度可能会有所不同，因此没有固定高度到目前为止我得到的是（通过假设，文本不会超过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>

Answer 1

尝试在浮动元素和要与底部对齐的文本元素上使用display: inline-block;。

然后将属性vertical-align: bottom;放在要对齐到底部的文本元素上。

Answer 2

我认为你可以使右栏成为固定高度，因为左栏和右图在你的图片示例中是相同的。

为方便起见，我做了一个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;
}

Answer 3

这是一个解决方案，使用display：table，relative和absolute positioning：

<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 /

将文本放在底部，但让它保留在文档流中

3 个答案: