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 的顶部对齐。

但是，我无法将浮动元素与文本底部或父 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; }