背景不起作用

-2

我有一個特定的css代碼。但它沒有按預期工作。我想覆蓋整個內容的白色包裝。但它不起作用。我只是得到頂部和底部的div，我的內容顯示。其實我所有的內容都應該顯示在我的白色包裝裏面。背景不起作用

<div id ="Wrapper1"> 
     <div class ="whitewrapper"> 
       <div class ="content"> 
         <div class ="subleft"> 
           loremipsum 
         </div> 
         <div class ="subright"> 
           loremipsum 
         </div> 
       </div> 
     </div> 
</div>

#Wrapper1{ 
    float: left; 
    margin: 100px 5px 0 95px; 
    min-height: 360px; 
    padding: 0 0 5px; 
    width: 900px; 
    background: none repeat scroll 0 0 #000; 
}  
.whitewrapper { 
    background: none repeat scroll 0 0 #fff; 
    margin: 10px; 
    padding: 10px; 
} 
.subleft { 
    float: left; 
    max-width: 400px; 
    width: 400px; 
} 
.subright { 
    float: right; 
    max-width: 300px; 
    width: 300px; 
} 
.content{ 
     width:880px; 
     max-width:880px; 
}

請告訴我的錯誤？

來源

2012-01-27 user632347

'.white_wrapper {背景：＃000;}' - 爲什麼你應該避免表象的類名經典範例。 – 2012-01-27 17:37:30

我嘗試了所有的顏色組合。即使使用以下代碼[code] .white_wrapper {background}：無重複滾動0 0 #fff; margin：10px; padding：10px; } [/ code]但它不工作。這是否是投下的原因？ – user632347 2012-01-27 17:40:10

你被低估了，因爲它不清楚你的問題是什麼。 – Jivings 2012-01-27 17:43:50

.content { 
overflow: auto; 
}

你應該google了一下「CSS浮法」明白

來源

2012-01-27 17:43:29 ggzone

我也試過。它沒有按預期工作。看到我的評論Jivings – user632347 2012-01-27 17:45:10

編輯...嘗試 – ggzone 2012-01-27 17:49:04

.white_wrapper應該.whitewrapper

來源

2012-01-27 17:40:55 Jivings

編輯了錯字。但那不會解決我的問題。你可以自己測試一下。實際上白色包裝應該覆蓋左側和右側的整個文本。但它並沒有這樣做。 – user632347 2012-01-27 17:44:06

你的意思是[白色說唱歌手]（http://www.youtube.com/watch?v=rog8ou-ZepE&ob=av2e）？ – 2012-01-27 17:44:52

@Madmartigan：我想我的內容應該顯示在白色包裝內。但它沒有顯示 – user632347 2012-01-27 17:48:10

這是因爲你浮在內容分工內的所有內容。浮動內容不會在其父項方面佔用任何空間（垂直），因爲它基本上從內容中刪除。您的最佳解決方案將實際上是在兩個浮動元素之間添加內容，或者在內容部門設置一個高度（不可靠）。

另外，對於這樣的CSS破解，但你不必擔心瀏覽器的兼容性：

.whitewrapper:after { 
    content: " "; 
    display: block; 
    clear: both; 
}

See it live.

一種更好的方式，以風格化的元素將是使內容容器顯示爲表格，其子顯示爲表格單元格，假設這些將是佈局中唯一的兩列：

.subleft { 
    display: table-cell; 
    max-width: 400px; 
    width: 400px; 
} 
.subright { 
    display: table-cell; 
    max-width: 300px; 
    width: 300px; 
} 
.content{ 
    display: table; 
    width:880px; 
    max-width:880px; 
}

See it live.

來源

2012-01-27 17:49:03 animuson

這是他的狡猾的CSS黑客。難道一個更好的答案教他如何正確地設計它？ – Jivings 2012-01-27 17:52:39

@animuson：而不是使用usinf浮動，我如何將內容與左右對齊？那麼有沒有比浮動更好的方法？ – user632347 2012-01-27 17:55:20

@ user632347：查看我使用表格顯示替代浮動的更新。 – animuson 2012-01-27 18:00:56

背景不起作用

回答

相關問題