Question

我正在做一个个人项目，并且遇到麻烦让图像浮动到某些文本上。

我希望单个段向左浮动，向右浮动的图像和不下面的任何后续段落也在图像旁边。我只想要图片旁边的那一段。我总是想在图像和文本之间留一点空间。

网站为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，很难确定究竟需要显示的内容。

Answer 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>

Answer 2

Floats在技术上仍然是一个“流入”元素。这意味着默认情况下浮点数将清除以前的元素，如果它们不适合它们。您遇到的问题是图像位于第一段之后。因为段落是全宽的，所以它显示在它下面。将图像移动到段落上方，图像将采用宽度优先，段落将环绕它。

您可能还需要在第一段之后直接清除段落，因为您只希望一段落在图片旁边。只需在与浮子相同的方向上清除。

如何使特定段落向左浮动，图像向右浮动

2 个答案: