如何在右下方的文本中包装文本？

问题描述 投票：56回答：7

每当我尝试在CSS中做一些看似简单的事情时，它都行不通。

我有一个包含460x160图像的内容div。我想要做的就是将图像放在右下角并将文本环绕在它周围。

<div id="contents">
    <img src="..." />
    text text text text text text ...
</div>

所以我希望它看起来像：

------------------
| text text text |
| text text text |
| text text -----|
| text text |    |
------------------

使用左上角或右上角图像进行操作是蛋糕：

#contents img { float:right; }

------------------
| text text |    |
| text text -----|
| text text text |
| text text text |
------------------

现在我该怎么把它推到底部？到目前为止，我提出的最好的是：

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px

------------------
| text text      |
| text text      |
| text text -----|
| text text |    |
------------------

在这种情况下，文本不会在边距中打印，因此图像上方有空白区域。

#contents { position:relative; }
#contents img { position:absolute; right:0; bottom:0; }

-or-

// move the img tag under the text in the html and:
#contents img { float:right; margin-top:-160; }

------------------
| text text text |
| text text text |
| text text -----|
| text text | te |
------------------

在这种情况下，文本打印在图像上方或下方。

那么......我怎么能做到这一点？

html css css-float
7个回答
29
投票

肯定有人问过before (2003)，before (2002)或before (2005)

最后一个链接实际上建议使用javascript-based solution，但是对于固定（即非流体）解决方案。

然而，与other advices found一致

唯一的方法是将浮动元素放在文本中间的某个位置。在所有的时间里都不可能完美。

或者this one：

它包括浮动一个垂直的“推动器”元素（例如img，但它可能更聪明，只使用一个空div），然后使用clear属性浮动它下面的所需对象。这种方法的主要问题是你仍然需要知道文本有多少行。它使事情变得更容易，并且绝对可以使用javascript编码，只需要将“推动器”的高度更改为容器的高度减去浮动的高度（假设您的容器未固定/最小高度） 。

无论如何，作为discussed in this thread，没有简单的解决方案......

Cletus在评论中提到这个thread from 2003，它再次声明它不容易实现的事实。 但是，它确实是指这个Eric Meyer's article，它接近你想要达到的效果。

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

然而，Chadwick Meyer在his answer建议一个基于:before CSS selector的解决方案（Leonard的answer的变化）。 它确实work here。

16
投票

嗯......这是一个非常古老的帖子，但我挣扎着用一个小的解决方法逃脱了。我需要将图像对齐到右边，并且距离顶部恰好是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

工作得很好:)

1
投票

我发现最简单的解决方案是将img包装在div元素中，然后使用padding-top和margin-bottom值来对齐它。

这是我的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的高度。不确定它是否有用。

1
投票

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

0
投票

除了发布的解决方案之外，我还使用了一个快速的JQuery hack来动态调整推动器的高度，通过将我想要的区域的高度从内部区域的高度向右下方对齐，并将其应用于推送器div，如下：

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

它需要一些轻微的调整，但通常你会得到的！

-1
投票

我找到的解决方案涉及你有一个宽度不变的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>
-2
投票

好。所以我实际上遇到了同样的问题，在某些时候答案就像星期六晚上的芝士蛋糕一样。当您尝试在Word中设置文本换行时，它几乎与您的命中和未命中效果相同。

img.right {
     float: right;
}

现在你所要做的就是将它设置在你希望线条断开的文本中。文本将浮动到文本的末尾，因此它总是将文本推到左侧，但如果您将图像放在文本的中间，如...

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

顶部保持原样，文本可以自由浮动在图像上方，其余部分被推到图像的左侧。这是一种解决方法，但不像使用JS那样乏味，如果使用WYSIWYG编辑器，它就更容易了。如果您使用WYSIWYG编辑器自动具有该功能，请考虑它。 ：P问题解决了。

干杯。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.