Position text at bottom, but letting it stay in document flow

问题

I have the following problem: There's an image floating left and a margin to the right. Next to it, there is a div containing a headline and a text (I don't know any height-values of both, because it will be inserted dynamically).

The headline must align to the top and the text to the bottom. I thought it's enough to position the text absolute, but if the height of the image is smaller than the height of the headline + the text, the text flows into the headline....

I haven't found any solution to position the text at the bottom but letting it stay in document flow.

I am not allowed to use any table-elements (on the otherhand, display: table and so on is allowed, but I haven't figured out any solution with that as well)

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

Please help me, I just can't figure out any solution!

/EDIT:

Both the imnages' and text-/headline-containers' height may vary, so no fixed height. What i got so far is (by assuming, the text wont have more than 4 lines (but thats not the best way). The next Problem is: Firefox adds the margin-bottom of .box to the bottom: 0; of the text (like: bottom: -35px; But shown as bottom: 0; ... Chrome does interpret that the right way):

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

回答1:

try using display: inline-block; on both floating elements and the text element that you want aligned to the bottom.

Then put the property vertical-align: bottom; on the text element you want aligned to the bottom.

回答2:

I assumed you can make the right column a fix height, since the left column & right are the same in your image example.

I made a jsfiddle for your convenience: http://jsfiddle.net/hLPXM/

Alternately, here is what I did, based on your original code:

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

Note I added a .bottom-text class around the <p> that you want to align bottom.

Here is the CSS for the divs to float properly, etc. Note the position:relative; :

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

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

And more importantly the text starting from the baseline:

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

回答3:

Here is a solution for you, using display: table, relative and 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>

It does not rely on any fixed heights, and adopts to the height of the image automatically.

jsfiddle.net/EUvXh/

来源：https://stackoverflow.com/questions/13068997/position-text-at-bottom-but-letting-it-stay-in-document-flow

标签

html

css

position