我不确定确切写什么标题,但是我的jsfiddle应该使所有内容都非常清楚。
https://jsfiddle.net/1btr7mkq/
<div class="blabla">
Bla bla bla blalblabl bla bla bla bla bla
<div class="questionMark">?</div>
</div>
如果我将输出窗口缩小,则会有一个甜蜜的地方,问号落入第二行,但是blabla停留在第一行。
如何避免这种互动?我看到2种可能的解决方案,第一种解决方案是在右侧为问号“保留”宽度。这样,如果文本距离右边缘40像素以内,它将被下拉。
第二,更好的解决方案是在右侧不保留宽度。在这种情况下,最后一行上方的行可以使用完整宽度,并且在行末之前不会换行40px。在这种情况下,页面将不得不“检测”问号跳行,并在其自己的内容下添加空白行。
我已经尝试了一些方法,但是无法按照我的要求使它们中的任何一个都起作用。
只需将带有问号的DIV放在容器DIV的开头即可。与float: right
此结合,将图像始终放置在容器的右上角,并允许文本在其左下方浮动:
<div class="blabla">
<div class="questionMark">?</div>
Bla bla bla blalblabl bla bla bla bla bla
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句