用于构建功能的CSS工作，但打破了用于构建网站的CSS [英] CSS used to build a feature works, but breaks the CSS used to build the site
问题描述
我在使用CSS制作的网站上构建网页，我使用CSS来设置网页样式。当我看到一个虚拟html页面使用CSS它完全按照我需要，即它放置一个图像在协和，然后有文本旁边的图像。但是，一旦我在网站上确认它，它打破了页面，好像我使用的CSS干扰了用于制作我正在建设的实际网站的CSS。我试图改变div和img，但它移动手风琴和文本不再是图像旁边。因为你可能猜到我是一个CSS noob，所以任何帮助赞赏。
I'm building a page on a site that was made using CSS and I'm using CSS to style the page. When I look at a dummy html page using the CSS it does exactly as I need i.e. it places an image in the accordian, then has the text next to the image. However once I confirm it on the site, it breaks the page, as if the CSS I've used has interfered with the CSS used to make the actual website that I'm building on. I tried to change the div and img to but it moves the accordian and the text is no longer next to the image. As you can probably guess I am a CSS noob, so any help appreciated.
这是发生在我添加了一个Div和一个Img参数。
This happened after I added a Div and an Img parameter.
这里是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。
Tidied up the page, removed CSS that didn't need to be there.
推荐答案
您不想定位网页上的所有div，只是手风琴。如果这是手风琴中唯一的div / img，请将上述代码更改为
You don't want to target all divs on the page, just the div inside the accordion. If that's the only div/img in the accordion, change the above code to
.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;
}
这篇关于用于构建功能的CSS工作，但打破了用于构建网站的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
