html - 对齐图片，使其不在导航列表下换行。

Question

我正在为我正在学习的初学者 Internet 编程类(class)编写 CSS 文件。问题是，每当我将部分中的图像制作成链接时，它就会搞砸与部分其余部分的对齐。我在这张图片所在的一侧有一个导航列表，它下面的图片和链接在导航栏下方对齐，而下面的所有其他内容都保持对齐。

代码如下:

<p>If you click on the Personal link, you can browse my favorite Halloween pictures, 
    stories, and films. And if you join my email list, I will keep you up-to-date on 
    all things Halloween.</p>
<h2>Product of the Week</h2>
  <a href="products/cat.html">
         <img src="images/cat1.jpg" alt="20'' Deranged Cat">
  </a>
  <br>
  <a href="products/cat.html">20" Deranged Cat</a>
  <h2>My guarantee</h2>
  <p>If you aren't completely satisfied with everything you buy from my site, you can return it 
    for a full refund. 
  <strong>No questions asked!</strong></p>  

这是 CSS:

 /* Section */
section 
{
    margin: 20px 25px 25px 25px;
}

section h1 
{ 
    font-size: 150%;
    margin-bottom: .5em;
    margin-left: 200px;
}

section h1:first-letter 
{ 
    font-size: 250%;
}

section h2 
{
    font-size: 125%;
    margin: .8em 0 .5em 0;
    margin-left: 200px;
}

section p 
{
    margin-bottom: .5em;
    margin-left: 200px;
}

/*Formatting for added Product of Week Request in Section 6 Bullet 4*/
/*Changed for Section 7, Bullet 3*/
section img a
{
    margin: 300px;
}

section a
{
    display: inline;
}

/* Footer */

请告诉我哪里做错了!

Answer 1

Damann23，欢迎来到 SO...要对齐元素，您必须熟悉几个属性，例如

float:left;
display:inline;

我把你的代码放在一个 fiddle 里，虽然它需要工作，但这可以让你知道如何开始。但请记住，将您的代码组织成多个部分 (div)，而不是在工作表中运行所有内容始终是明智之举。这样您就可以单独管理这些部分

DEMO