將子元素移出父元素

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> 

所以我在想，也許是位置的子元素（基本上都是從模板的內容）從父元素（boxmain在layout.tpl定義），這將清除利潤率和補白，但我怎麼能這樣做，它會工作？

模板中的內容基本上是幾個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上進行測試。