如何在右下角的 div 上换行文本？

小开

我找到的解决方案包括一个 div，它的宽度不变，文本的数量也不变。然后您可以将图像放置在文本中，并使其对齐 = 正确。所以如果你有正确数量的文本围绕它，那么你就得到了图像的右边和底部的 div。

    <style >
#contents{
border: 2px solid red;
background: #ddd;
position: absolute;
width:600px;
}






</style>
<div id="contents">
text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...  <img src="http://daiphyer.com/images/daiphyerv6-sliced_02.png" ALIGN="RIGHT"/>
text text text text text text ...    text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...    text text text text text text ...
hey hey text text text text text text ...    text text text text text text ...    text text text text text text ...
text text text text text text ...    text text text text text text ...
</div>

小开

最佳答案

它肯定似乎已经问了之前(2003年)，和之前(2002年)，或之前(2005年)

最后一个链接实际上建议使用基于 javascript 的解决方案，但是对于固定的(即非流体的)解决方案。

然而，它与其他建议是一致的

唯一的方法是将浮动元素放在文本的中间。不可能一直做到完美。

或这个:

它包括浮动一个垂直的“ pusher”元素(比如 img，但是只使用空 div 可能更明智) ，然后使用 clear 属性在它下面浮动所需的对象。这个方法的主要问题是，您仍然需要知道文本的行数。但是它使事情变得更加容易，而且肯定可以用 javascript 编写，只需要将“ pusher”的高度改为容器的高度减去 float 的高度(假设您的容器不是固定/min 高度)。

无论如何，作为在这个线程中讨论，没有简单的解决方案..。

Cletus 在评论中提到了这个 2003年的线索，它再次表明了这个事实不容易实现。
但是，它确实引用了这个 Eric Meyer 的文章，它接近于您想要实现的效果。

通过理解 float 和普通流是如何相互关联的，以及理解如何使用 clear 来操作浮点周围的普通流，作者可以将 float 作为一个非常强大的布局工具。
因为最初并不打算将浮动用于布局，所以可能需要一些技巧来使它们按预期的方式运行。这可能涉及包含浮动元素的浮动元素、“清除”元素或两者的组合。

然而，查德威克 · 迈耶建议在他的回答的解决方案基于 CSS 选择器(变异的莱纳德的回答)。
它能做在这里工作。

2021年4月更新: Temani Afif在他的回答中建议使用 Flexbox 结合外形。
但是请检查一下 Flexbox 的向后兼容性，尽管所有浏览器的它的支持都很好。

小开

好吧。实际上我也遇到过同样的问题，在某个时候，答案就像周六晚上的奶酪蛋糕一样触动了我。这几乎与在 Word 中设置文本包装时的命中和错过效果相同。

img.right {
float: right;
}

现在你要做的就是把它设置在文本中你想让行分开的位置。文本将浮动到文本的末尾，所以它总是将文本向左推，但是如果你把图像放在文本的中间，如..。

<p>This is some text <img src="example.jpg" class="right" /> and then add
some more text.</p>

顶部保持原位，文本可以自由浮动在图像上方，其余部分被推到图像的左侧。这是一种变通方法，但不像使用 JS 那样单调乏味，如果您使用所见即所得编辑器，那就更简单了。想想看，如果你使用所见即所得的编辑器，它有这个功能自动。问题解决。

干杯。

小开

嗯... 这是一个相当老的职位，但我挣扎，摆脱了这与一个小变通方案。我需要有一个图像对齐到右边，正好从顶部170像素。并且需要文本流在图像的顶部，左侧和底部。我所做的就是创建一个0px 宽，170px 高，浮点数是正确的。然后 img 就会浮起来，清空右边，瞧！

<!-- I used CSS, but inline will serve well here -->
<div style="float: right; width: 0px; height: 170px"></div>
<div style="float: right; clear: right"><img src="..." /></div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text

效果很好:)

小开

在发布的解决方案之后，我使用了一个快速的 JQuery 技巧来动态地调整高度的推手，通过采取的区域的高度，我想底部右对齐远离高度的内容区域，并应用到推手的 div，如下所示:

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')

它需要一些轻微的调整，但一般工程以及您将得到！

小开

我发现的最简单的解决方案是将 img 包装在一个 div 元素中，然后使用填充顶部和边距底部值来对齐它。

这是我的 CSS

.contentDiv  .bottomRight img{
height: 130px;
float:right;
padding-top: 60px;
margin-bottom: -10px;
}

这是 HTML

<div class="contentDiv">
<h1>If you are seeing this and reading it, then all is working well.</h1>
<div class="bottomRight">
<img class="bottomRight" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
</div>

我之所以能够使用填充和边距，是因为我在父元素“ contentDiv”中使用它来根据内容自动调整 div 的高度。不知道有没有用。

小开

对于 jQuery 解决方案，请尝试由 gilly3: https://github.com/gilly3/lowFloat创建的 lowFloat 插件

小开

使用 Flexbox 结合外形技巧，现在只需要几行代码就可以实现。

.wrapper {
display: flex; /* this is needed for the height:100% */
}


.box {
text-align: justify;
font-size: 20px;
}


.float {
float: right; /* shape-outside only apply to float elements */
height: 100%; /* take all the height */
margin-left: 15px;
/* push the image to the bottom */
display: flex;
align-items: flex-end;
/**/
shape-outside: inset(calc(100% - 100px) 0 0); /* make the text flow on the top free space*/
}

<div class="wrapper">
<div class="box">
<div class="float"><img src="https://picsum.photos/id/1069/100/100"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna
ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent
ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas
hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
</div>
</div>

下面是我围绕这个主题写的一篇文章，其中有更多的例子: https://css-tricks.com/float-an-element-to-the-bottom-corner/

另一个版本的代码更少，而且没有图像的包装:

.wrapper {
display: flex; /* this is needed for the height:100% */
}


.box {
text-align: justify;
font-size: 20px;
}


img {
float: right; /* shape-outside only apply to float elements */
height: 100%; /* take all the height */
width: 100px;
margin-left: 15px;
/* push the image to the bottom */
object-fit: contain;
object-position: bottom;
/**/
shape-outside: inset(calc(100% - 100px) 0 0); /* make the text flow on the top free space*/
}

<div class="wrapper">
<div class="box">
<img src="https://picsum.photos/id/1069/100/100">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna
ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent
ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas
hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
</div>
</div>

小开

如果你必须支持 IE10-11，你可以使用@Temani Afif 的解决方案进行一些修改。这里是重要的 html 和 css

<div id="wrapper">
<div class="box">
<div class="push-float-img"></div>
<img src="…" alt="">
Long text…
</div>
</div>

#wrapper {
/* Flexbox gives explicit height used by #wrapper > .box */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}


/* For IE10 compatibility only */
#wrapper > .box {
width: 100%;
}


/* If image width = 300% of its height */


#wrapper > .box > .push-float-img {
float: right;
width: 0;
height: 100%;
/* Image height in parent width percentages */
margin-bottom: -20%;
}


#wrapper > .box > img {
clear: right;
float: right;
margin-left: 10px;
/* Image width in parent width percentages */
width: 60%;
}

// "resize: horizontal" css is not supported by IE
if( !false || navigator.userAgent.match(/Trident\/7\./))
window.addEventListener('mousemove', function( ev ){
var w = document.getElementById('wrapper');
w.style.width = ev.clientX + 'px';
//console.log( w );
});

* {  font: 16px sans-serif;  }


#wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* make it resizable */
resize: horizontal;
overflow: hidden;
/* demo styles */
border: 1px solid blue;
width: 1000px;
max-width: 95vw;
text-align: justify;
}


/* For IE10 compatibility only */
#wrapper .box {
width: 100%;
}


#wrapper .push-float-img {
float: right;
width: 0;
height: 100%;
/* demo styles */
background: #F8F;
width: 10px;
}


#wrapper img {
clear: right;
float: right;
margin-left: 10px;
/* demo styles */
opacity: .8;
border-radius: 20px;
}


/* Change #wrapper.case-N  */


.case-1 .push-float-img { margin-bottom: -200px; }
.case-1             img {        height:  200px; }


.case-2 .push-float-img { margin-bottom: -100px; }
.case-2             img {         width:  300px; }


.case-3 .push-float-img { margin-bottom: -20%; }
.case-3             img {         width:  60%; }


/* NOPE! */
.case-4 .push-float-img { margin-bottom: -20%; }
.case-4             img {        height:  20%; }

<h1>Resize the below div!</h1>


<div id="wrapper" class="case-3">
<div class="box">


<div class="push-float-img"></div>


<img src="https://picsum.photos/id/130/600/200" alt="">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
</div>
</div>