html - 内容不适合 HTML 部分(不能将图像和 p 放在一行中)

Question

我有一项微不足道的任务 - 将图像和文本并排放置在一行中。我完全不知道为什么我以前使用的方法不起作用，我什么都试过了。

这是我的 HTML:

<section class="section-creations" id='creations'>
            <div class="row">
                <h2>My creations</h2> 
                <br>
                <div class="showcase">
                    <img src="resources/img/dornan.png" alt="Talking with sgt.Dornan">
                    <p>"Talking with sgt.Dornan" is a reincarnation of a legendary dialogue from a not less legendary game - Fallout 2. This piece is absolutely gold and will put a smile on everyones face. But now you can rewind that experience in your browser! Done in pure HTML, CSS and JS.</p>
                </div>
                <div class="showcase">
                    <img id='bio' src="resources/img/bioshock.png" alt="Bioshock pipe game">
                    <p id='bio_p'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut illum laboriosam voluptatem ullam id. Rerum ratione repellendus minus, doloribus earum quos, tempore explicabo perspiciatis, optio accusamus, voluptate illum aut quia.</p>
                </div>
            </div>
        </section>

这是我的 CSS:

.row {
    max-width: 1140px;
    margin: 0 auto;
}

.showcase {
    margin-top: 20px;
}

.showcase p {
    float: right;
    display: inline-block;
}

.showcase img {
    width: 550px;
    height: auto;
    margin-right: 50px;
    display: inline-block;
}

#bio {
    float: right;
}

#bio_p {
    float: left;
}

这就是它现在的样子(可怕!):

我希望第一个图像位于左侧，p 将其 float 在右侧，并与第二个图像相反。

不知何故，我的创作部分的内容从中爬出并弄乱了下一部分的内容。我查看了我的 HTML 和 CSS，没有发现任何语法错误，所有大括号都是闭合的。

问题是什么？

非常感谢任何想法。

Answer 1

试试这个。我已将宽度添加到 p标记并添加 <div class="clear"></div>在 p 标签后清除 float 值。

.row {
  max-width: 1140px;
  margin: 0 auto;
}

.showcase {
  margin-top: 20px;
}

.showcase img {
  width: 50%;
  height: auto;
  margin-right: 4%;
  float: left;
}
#bio{
  margin-left: 4%;
  margin-right: 0;
}
.showcase p {
  float: right;
  width: 46%;
}
#bio_p{
  float:left;
}

#bio {
  float: right;
}
.clear{
  clear:both;
}

<section class="section-creations" id='creations'>
    <div class="row">
        <h2>My creations</h2>
        <br>
        <div class="showcase">
            <img src="https://dummyimage.com/300x200/000/fff" alt="Talking with sgt.Dornan">
            <p>"Talking with sgt.Dornan" is a reincarnation of a legendary dialogue from a not less legendary game - Fallout 2. This piece is absolutely gold and will put a smile on everyones face. But now you can rewind that experience in your browser! Done in pure HTML, CSS and JS.</p>
            <div class="clear"></div>
        </div>
        <div class="showcase">
            <img id='bio' src="https://dummyimage.com/300x200/000/fff" alt="Bioshock pipe game">
            <p id='bio_p'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut illum laboriosam voluptatem ullam id. Rerum ratione repellendus minus, doloribus earum quos, tempore explicabo perspiciatis, optio accusamus, voluptate illum aut quia.</p>
            <div class="clear"></div>
        </div>
    </div>
</section>