如何让特定段落向左浮动,图像向右浮动

Posted

技术标签:

【中文标题】如何让特定段落向左浮动,图像向右浮动【英文标题】:How to get a specific paragraph to float left, and the image to float right 【发布时间】:2013-09-06 16:09:47 【问题描述】:

我正在做一个个人项目,但无法让图像在某些文本的右侧浮动。

我希望 single 段落向左浮动,而要向右浮动且 的图像下方也有任何后续段落位于图像旁边。我想要图片旁边的那一段。我总是希望在图像和文本之间留一点空间。

网站是here,图片在“过去”页面上。

在“过去”页面上,图像应浮动在第一个段落的右侧。

过去的页面 html: 过去的

<div class="bl-content">
<h2>When I was young...</h2>
<p>I wanted to be a <span>crazy cat lady.</span> I then realized that being a crazy cat lady doesn't give me an income but infact, did quite the opposite and took away any money I would have.</p>
<img src="/images/catparty.jpg" style="float:right">
<p>So I chose the next best thing &#8210; Web Development and Web Design. I knew it was <i>"my thing"</i> since Grade 6 when I found a drag and drop website maker called Piczo. It was all of the rage when I was 12 years old, I assure you. It wasn't appealing and definitely wasn't user-friendly... but it was mine and I loved it.</p>
<p>I decided to challenge myself more and learn some basic HTML and CSS so that I could get more involved in my new found passion. This lead me to have my own site on Freewebs.</p>
<p>Not too long after having my first Freewebs site I recieved my own subdomain. After that, I recieved my own <i>adoptable</i> domain. I was still young at the time so the best domain name I chose was something along the lines of <span>broken-wings</span> dot something.</p>
<p>On all of the sites that I owned, I would create content for other users with my <strong>amazing</strong> version of Paint Shop Pro (well... it was to me!) which included backgrounds, wallpapers, HTML and CSS tricks, and a lot of other things that I believed were great. I may have not of been the best, but it sure gave me an amazing foundation for school.</p>

</div>
<span class="bl-icon bl-icon-close"></span>
</section>

一些 CSS:

/* Custom content */

.bl-content p 
margin: 0 auto;
padding-bottom: 15px;
font-size: 1.7em;
line-height: 1.8;


.bl-content p.norex 
    font-size: 35px;
    text-align: center;


.bl-content p span 
    padding: 0 10px;
    background: #ffffff;
    color: #ed1556;

如果我没有提供足够的 HTML 或 CSS,我深表歉意。您可以转到提供的链接,但我觉得这很容易解决。这个布局中有很多 CSS 和 HTML,很难确定到底需要显示什么。

【问题讨论】:

你试过在段落中添加图片吗? @Ibu 刚刚做了。不过差别不大。 在段落内移动图片时,将其移动到段落的开头而不是结尾。 @andi 非常感谢!我知道这是一个简单的修复,没想到这么简单...... duhhhhhhh :) 【参考方案1】:

使用这个-

<div class="bl-content">
<h2>When I was young...</h2>
<img src="/images/catparty.jpg" style="float:right">
<p>I wanted to be a <span>crazy cat lady.</span> I then realized that being a crazy cat lady doesn't give me an income but infact, did quite the opposite and took away any money I would have.</p>

<p>So I chose the next best thing &#8210; Web Development and Web Design. I knew it was    <i>"my thing"</i> since Grade 6 when I found a drag and drop website maker called Piczo. It was all of the rage when I was 12 years old, I assure you. It wasn't appealing and definitely wasn't user-friendly... but it was mine and I loved it.</p>
<p>I decided to challenge myself more and learn some basic HTML and CSS so that I could get more involved in my new found passion. This lead me to have my own site on Freewebs.</p>
<p>Not too long after having my first Freewebs site I recieved my own subdomain. After that, I recieved my own <i>adoptable</i> domain. I was still young at the time so the best domain name I chose was something along the lines of <span>broken-wings</span> dot something.</p>
<p>On all of the sites that I owned, I would create content for other users with my        
<strong>amazing</strong> version of Paint Shop Pro (well... it was to me!) which   included backgrounds, wallpapers, HTML and CSS tricks, and a lot of other things that I believed were great. I may have not of been the best, but it sure gave me an amazing foundation for school.</p>

【讨论】:

【参考方案2】:

从技术上讲,浮动仍然是“流入”元素。这意味着默认情况下,如果它们不能放在它们旁边,浮动将清除先前的元素。您遇到的问题是图像在第一段之后。由于段落是全宽的,它显示在它的下方。将图片移到段落上方,图片将优先考虑宽度,段落将环绕它。

您可能还需要在第一段之后直接清除该段落,因为您只希望一个段落位于图片旁边。只需按照与浮动相同的方向清除即可。

【讨论】:

以上是关于如何让特定段落向左浮动,图像向右浮动的主要内容,如果未能解决你的问题,请参考以下文章

CSS中浮动的原理和规则

div+css关于浮动问题

向右浮动是向左浮动?

CSS的浮动和清除

css 浮动(float)

html 中的float属性 只能向左或向右浮动吗,能向左浮动100px吗