CSS背景圖像裝箱白不FULLWIDTH

神關於CSS測試現場再次爲http://testpress.dramend.com/amend-2/，我現在有這主要內容與白色背景上的全角另一個問題：CSS背景圖像裝箱白不FULLWIDTH

enter image description here

但我想實現了這種盒裝佈局具有相同白色背景，但它需要盒裝這樣的例子：

enter image description here

我使用WordPress的optimiz編輯按最新版本，它沒有任何選項可以將部分更改爲裝箱或全寬，可以選擇將背景更改爲圖像，但一旦將其設置爲我的背景圖像，就會看起來像這樣：

enter image description here

我是否可以在第二張圖像上使用普通css作爲主要內容背景來實現盒裝佈局？

HTML

//main container  
<div style="background:#ffffff; class="row one-column cf ui-sortable" id="le_body_row_4" > 
    <div class="fixed-width"> 
     <div class="one-column column cols" id="le_body_row_4_col_1"> 
     // image html comes here 
     .. some more html 
     </div> 
    </div> 
</div>

感謝

來源

2014-01-09 Dek Dek

iddiv告訴我們你的HTML，你用CSS和諸如jsfiddle.net或jsbin.com操場試了一下。 – Ravimallya

還挺新的。我應該在jsfiggle.com上提供的盒子上粘貼所有js，css和html嗎？這是我正在做的wordpress網站。謝謝 –

不需要。只需製作希望獲得背景的部分內容的HTML副本。 – Ravimallya

首先你正在使用table因此默認情況下，table將佔用整個水平空間，因此請將您的容器固定爲width並將margin: auto;指定爲

.container { 
    margin: auto; 
    overflow: hidden; 
    padding: 0; 
    position: relative; 
    width: 1000px; 
}

，比使用background-color: #fff;上具有#le_body_row_4

來源

2014-01-09 09:46:41

哇再次感謝！這完美的工作！學習的東西，採納你的建議感謝你非常多@mr。Alien –

@DekDek你可以學習的最大建議是學習如何在沒有'table'的情況下製作佈局，而且你會讚美我更多:)同樣，'overflow：hidden;'是一種骯髒的方式來清除你的浮動，你可以學到更多[這裏]（http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734）如何做到這一點正確的方式，也可以搜索clearfix，它會像' overflow：hidden;''with'：after' pseudo，這會更好，但是如果您要支持傳統瀏覽器，請不要忘記此方法並堅持使用'overflow：hidden;' –

是的，我一定會記下並且將在不久的將來嘗試修復所有表格。明白了:)收藏並添加爲收藏:)你是最好的@mr。阿里恩歡呼！ –

你可以做到這一點通過CSS，但問題是無論模塊使用的是被添加內嵌樣式它，例如

您的集裝箱類row one-column cf ui-sortable和ID le_body_row_4具有這樣的內聯樣式

background:#ffffff; 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),

內嵌樣式被賦予了CSS文件的樣式偏好，如果你能刪除內聯樣式並添加CSS這些類one-column column cols

.one-column .column cols { background: #fff }

這將解決您的問題

來源

2014-01-09 09:36:32

謝謝，所以我需要手動更改模塊內聯css然後我會在哪裏放置'.one-column .column cols {background：#fff}'謝謝 –

你可以在那裏添加或如果你有你的css文件，那麼你可以添加它，因爲它沒有內聯樣式。再加上模塊會替換它當你想升級 –

CSS背景圖像裝箱白不FULLWIDTH

回答

相關問題