css - 盒子不浮动

Question

看过，但没有找到合适的答案。

我的问题很简单：试图漂浮，但没有成功。

这是页面：http ://www.linguashop.com/course/classic.php

左边的红色框应该向左浮动，灰色框和菜单出现在右边。

我正在使用的 CSS 如下：

.logo2013,      
.logo2013 a     {margin:0;width:220px;height:120px;}

.logo2013   {float:left;}

.logo2013   {border:1px solid #f00; border-top-left-radius: 10px; }

.logo2013 a     {display:block;text-indent:-9999px;}

.greybanner2013 {height:91px; line-height:1; background:#f7f6f2 left top;}  
.greybanner2013 {border:1px solid #ddd; border-top-right-radius: 10px;}

.greybanner2013 .fontsize32 h2 {padding-top:5px; font-size:32px;color:#777;font-weight:bold; margin:0; margin-left: 20px; }

.greybanner2013 .foreign {font-size:32px;color:#FF9300;font-weight:bold; display:inline; margin:0; margin-left: 20px; padding:0; }

.greybanner2013 .translation {font-size:28px;color:#AAA;font-weight:normal; display:inline; margin-left:  10px; }

/*menu*/

.nav2013 {height:28px; background-color:#787065; border:1px solid #ccc; }

.nav2013 ul {/*float:right;*/ list-style:none;margin:4px 0;padding:0}

.nav2013 li {float:left;padding:0 24px 0 22px;margin:0; right top no-repeat*/}

.nav2013 li a {font-family:Verdana,Arial,SunSans-Regular,Sans-Serif; display:block;color:#ebeae8;text-decoration:none;font-size:12px; font-weight:bold; }

.nav2013 li:last-child {padding-right:15px;background:none}

任何见解将不胜感激！

大卫

Answer 1

这就是我所看到的

如果您想将红色框一直浮动到左侧；

然后logo2013直接在下添加banner2013

它会创建这个

更新

我认为你的问题是左上角的边界半径。这应该解决它。

将此添加到.greybanner2013

border-top-left-radius:10px;

您放在那里的具有类似边界半径的徽标可以覆盖那里的灰色区域。要真正将红色框向左浮动并向右休息，同时将它们保持在屏幕中间需要更多的工作，并且可能需要对 html 和 css 进行相当多的更改。

logo2013您可以将类的背景颜色设置为white，这也会产生类似的效果。