背景不起作用

-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

背景不起作用

回答

相关问题