Question

我有一个使用模板的自定义PHP CMS。我有一个layout.tpl，我在其中设置了网站的整体外观，包括一个名为boxmain的类，它是布局的核心内容。在那里，我定义了我的style.css文件，其中包含boxmain类。

.boxmain { 
    background-color:#F5F5F5; 
    width:1025px;
    height:auto; 
    margin:0 auto; 
    font-size:11px;
    overflow: hidden;
    padding-top: 15px;
    padding-left: 5px;
    padding-bottom: 15px;
}

在它上面，我有一个图像横幅的课程。这还包含在内容和横幅之间创建空格的边距。

div#banner {
    background: url("../images/banners/banner1.jpg")  repeat scroll center center rgb(0, 0, 0);
    width: 100%;
    height: 270px;
    z-index: 1;
    margin-bottom: 25px; 
    -webkit-box-shadow:  0px 2px 15px 2px ;
    box-shadow: 0px 2px 15px 2px ;
}

我想要做的是，能够删除横幅和boxmain上的所有填充和边距，而不必修改样式表，而是将其包含在模板中。出于某种原因，当我在模板中执行此操作时它不起作用，它只是打破了Cufon。

<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>

因此我想，可能会将子元素（基本上是模板中的所有内容）放在父元素（layout.tpl中定义的boxmain）之外，这样可以清除边距和填充，但我怎么能这样做会有效吗？

模板中的内容基本上是几个div标签和一些图像。

Answer 1

这是一个有效的JSFiddle。

<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>

<div id="banner">Banner content</div>
<div class="boxmain">Main content</div>

由于内联样式很容易覆盖主样式表，我想说，这是一个排序问题。您可能在内联样式后包含主样式表，这可以解释它无法正常工作的原因。

将内联<style>移至boxmain也可以

<div id="banner">Banner content</div> <div class="boxmain"> <style type="text/css"> div.boxmain { margin: 0; padding; 0; } div#banner { margin: 0; padding: 0; } </style> Main content </div>

因此，在$page_content前加上覆盖样式前缀也应该这样做见JSFiddle

免责声明：仅使用Firefox 16进行测试。

移动子元素的父元素

1 个答案: