Html 将图像水平对齐到较大Div中CSS文本的右侧

我需要的顶部，中间和底部的图像要在这些div文本的右侧。此时，即使图像向右移动，文本向左移动，图像仍位于段落位置下方。我已经应用了reset.css

下面是相关的HTML和CSS

Index.html摘录：

<Div id="background">

    <div id="Space">
    </div><!--spacing between divs-->

<article id="Top">
    <h2>Flower arrangement</h2>
        <p>Our team of professional designers will make your event memorable and stress free. We will design to your theme, colour, budget and needs with attention to detail given high priority.</p>
        <img src="Images/Top_Image.gif" alt="" width="207" height="195">
        <a href="#" >Read More </a>     
</article>

    <div id="Top_box">
    </div><!--spacing between divs-->

<article id="Middle">
    <h2>Seed Library</h2>
        <p>Don't be afraid to try growing your own plants, you will be surprised how easy seed germination really is. A large variety of native seed mixes are offered, ideal for creating sustainable wildflower gardens.</p>
        <a href="#" >Read More </a>
        <img src="Images/Middle_picture.gif" alt="" width="208" height="216">

</article>

    <div id="Middle_box">
    </div><!--spacing between divs-->

<article id="Review">
    <h2>Ran Dome said:</h2>
        <p>'I have never had such an outstanding experience with such a wonderful group of people who understood my needs'</p>
        <img src="Images/Review_picture.gif" alt="" width="93" height="120">

</article>

<div id="Review_box">
</div><!--spacing between divs-->

<article id="Bottom">
    <h2>Sustainability</h2>
        <p>Belinda Aspect founded Aspect in April 1985 and is a leading expert on green floral design. Belinda's dual passions for floral design and sustainability were merged when she decided that The Aspect would 'go green'.</p>
        <a href="#" >Read More </a>
        <img src="Images/Bottom_picture.gif" alt="" width="208" height="216">
</article>

<div id="Bottom_box">
</div><!--spacing between divs-->

</Div><!--background picture Div-->

---

我也知道我可以改变它，让文章有边距，并去掉间距div，以获得与我想要的效果相同的效果，但我现在不关心这一点。

首先，我要修改您的代码：-

高度：50%px

是错误的-锚定标记位于不同的位置：一次在图像之前，另一次在图像之后。这是有意的吗？这就是说，由于您的图像似乎具有固定的高度，您可以应用

边距顶部：-70px

。同样，在jsbin等网站上发布你的例子，这样我们可以更好地了解它。我在发布了这篇文章后，意识到这一点，并没有解决它，我会在早上尝试页边空白顶部，看看它是否有帮助，我不认为锚是故意的，你介意把它们指给我，这样我就可以解决它吗？

#background {
    background-image: url(Images/background.jpg);
    background-repeat: no-repeat;
    width:100%;
}
#catch_line{
    color: #7f6e99;
    height: 50%px;
    width: 57%;
    margin-left: 6%;
    margin-top:132px;
    background-color: #000000;
    border-radius: 5px;
}
#catch_line h1{
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 3.4em;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    paddingtop: 50px;
    color: #7f6e99;
}
article#Top, article#Review {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    background-color: #7a9c52;
}
article#Middle, article#Bottom {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    background-color: #2d6d18;
}
article#Top h2, article#Middle h2, article#Bottom h2 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 1.6em;
    color: #0c1306;
    padding-bottom: 2%;
    word-spacing: 2px;
    padding-top: 3%;
    padding-left: 6%;
    margin right: 0px;
}
article#Top p, article#Middle p, article#Bottom p{
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 1em;
    color: #0c1306;
    width: 70%;
    clear: none;
    display:block;
    padding-left: 6%;
    padding-bottom: 2%;
    margin right: 0px;
}
article#Top a, article#Middle a, article#Bottom a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 0.7em;
    color: #dc3646;
    text-decoration: none;
    clear: none;
    float: left;
    padding-left: 6%;
    margin right: 0px;
}
article#Top img, article#Middle img, article#Bottom img{
    float: right;
    margin-right: 20px;
    clear: none;
    width: 140px;
    height: 140px;
    display:block;
    margin left: 0px;
}
article#Review h2 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 1.6em;
    color: #0c1306;
    padding-bottom: 2%;
    word-spacing: 2px;
    padding-top: 2.5%;
    text-align: center;
 }
article#Review p {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-style: italic;
    font-size: 1em;
    color: #0c1306;
    text-align:center;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 0.5%;
}
article#Review img{
    margin-left: auto;
    margin-right: auto;
    display:block;
    height: 78px;
    width:62px;
}
#Space, #Top_box, #Middle_box, #Review_box, #Bottom_box{
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height: 80px;
    clear: both;
}