1

我正在使用 CSS 制作的网站上构建一个页面，并且我正在使用 CSS 来设置页面样式。当我使用 CSS 查看虚拟 html 页面时，它完全按照我的需要，即它在手风琴中放置一个图像，然后在图像旁边放置文本。但是，一旦我在网站上确认它，它就会破坏页面，就好像我使用的 CSS 干扰了用于制作我正在构建的实际网站的 CSS。我试图将 div 和 img 更改为但它移动了手风琴并且文本不再位于图像旁边。你可能猜到我是一个 CSS 菜鸟，所以任何帮助表示赞赏。

这发生在我添加了一个 Div 和一个 Img 参数之后。

这是CSS：

img{
    display:inline-block;
    width:211px;
    height:146px;
    border:1px solid white;
    vertical-align:top;
    margin-right:10px;
}

div{
    display:inline-block;
    width:311px;
}

以及网页的代码：

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <link rel="stylesheet" href="css/style.css" />
        <!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="accordion vertical">
          <section id="vertabout">
              <h2><a href="#vertabout">Tutor-Led Course</a></h2>
              <img src="http://bathnes.learningpool.com/draftfile.php/2592/user/draft/826412532/TutorLedCourse.jpg" height="134" width="208" />
<div>To view the tutor-led course information, please click <a href="http://bathnes.learningpool.com/course/view.php?id=187">here</a></div>
<p><strong>IT Courses - Excel 2010 Basic</strong></p>
          </section>
          <section id="vertservices">
              <h2><a href="#vertservices">E-Learning Module</a></h2>
                      <p><p><img src="http://bathnes.learningpool.com/draftfile.php/2592/user/draft/826412532/RelatedELearning.jpg" height="146" width="211" /> </p></p>
          </section>


        </div>
    </body>
</html>

编辑：整理页面，删除不需要的 CSS。

4

1 回答 1

1

您不想针对页面上的所有 div，只针对accordion. 如果这是手风琴中唯一的 div/img，请将上面的代码更改为

.accordion img{
    display:inline-block;
    width:211px;
    height:146px;
    border:1px solid white;
    vertical-align:top;
    margin-right:10px;
}

.accordion div{
    display:inline-block;
    width:311px;
}
于 2013-05-08T08:46:46.637 回答