0

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

这是该问题的 jsFiddle 示例

<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给我的文本换行。

我追求的可能吗？

4

1 回答 1

1

据我所知，不，不是。请参阅这个问题，它提供了您提供的绝对定位示例。

有很多方法可以实现你想要的结果，但最终你最好将浮动元素放在最后一段之上。你甚至可以使用表格，但我讨厌这个想法，我建议如果你自己创建这个布局，而不是使用动态文本，可以使用浮动来调整它。这是一个非常快速的模型，只需重新排列你的元素

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

.content:before,
.content:after {
    content:" "; 
    display:table; 
}
.content:after { clear:both; }
于 2013-08-10T18:18:40.930 回答