CSS / JQuery：将浮动元素与父div的底部对齐

Question

是否可以将浮动元素与其父div的底部对齐并保留文本换行，最好使用CSS但必要时使用JQuery？

Here's a jsFiddle example of the issue

<div class="content">
    <div class="floated-top"></div>

    <p>Bacon ipsum dolor sit amet andouille jerky leberkas salami turkey, meatball prosciutto biltong shank chicken jowl frankfurter boudin. Beef pork chop fatback, shank ball tip hamburger meatball strip steak t-bone ground round meatloaf flank pork ribeye. Beef spare ribs pig flank. Kielbasa beef ribs turkey strip steak tail pastrami prosciutto jowl ham hock shoulder hamburger venison brisket flank.</p>

    <p>Biltong pork loin short ribs salami. Pork flank beef filet mignon biltong meatball. Frankfurter andouille bresaola, shank sausage shoulder tri-tip bacon pork salami meatball fatback capicola strip steak. Chicken ground round strip steak bacon pancetta pork loin leberkas boudin pork chop shank fatback. Turkey doner spare ribs cow shank boudin t-bone frankfurter turducken tongue flank kielbasa pork.</p>

    <p>Ground round tri-tip venison fatback. Shank tenderloin ribeye pastrami prosciutto strip steak capicola ground round spare ribs salami pork. Bacon strip steak jowl meatloaf prosciutto doner sausage leberkas beef. Tongue pork chop cow short ribs. Ham hock pork loin doner, drumstick short ribs chicken fatback flank frankfurter rump beef cow ribeye.</p>

    <p>Short ribs chicken shank, meatball jerky shoulder turducken. Short loin short ribs sausage meatball biltong rump pork loin boudin chicken. Tongue boudin leberkas, fatback biltong beef ribs short loin corned beef hamburger rump salami ball tip turducken kielbasa tri-tip. Pork belly spare ribs hamburger boudin, short ribs rump biltong andouille tri-tip pork loin beef ribs frankfurter tongue meatball. Corned beef swine brisket short loin tri-tip.</p>

    <div class="floated-bot"></div>
</div>

元素floated-top的行为与我通常期望/希望浮动元素的行为一样。文本环绕元素，floated-top的顶部与文本顶部对齐。如果浮动元素是父div中的第一个元素，则它与该父元素的顶部对齐。

但是，我无法将浮动元素与文本底部或父div的底部对齐。

我知道我可以使用绝对定位...

.content {
    position: relative;
}

.floated-bot {
    position: absolute;
    left: 0;
    bottom: 0;
}

...将元素定位在我想要的位置，但我会失去float给我的文本包装。

我可能会追求什么？

Answer 1

据我所知，不，不是。 See this question，它提供了您提供的绝对定位示例。

有很多方法可以达到你想要的结果，但最终只需将浮动元素放在最后一段之上就可以了。您甚至可以使用表格，但我讨厌这个想法，我建议如果您自己创建此布局，而不是使用动态文本，则可以使用浮点数进行调整。 Here's a really quick mockup by just rearranging your elements

您还需要确保清除浮动。 Try the micro clearfix hack：

.content:before,
.content:after {
    content:" "; 
    display:table; 
}
.content:after { clear:both; }