0

我现在有点溢出难题。

我的布局应该有一个带圆角的白色容器。页脚（位于容器底部和容器内部）是灰色阴影。我使用 'overflow-x:hidden' 来确保页脚 div 的底角被容器四舍五入。

问题是，当我隐藏溢出时，css 功能区（我在标题中使用的）折叠被隐藏了。

我正在尝试找出一种方法来重新排列 DIV 以实现具有圆角和顶部功能区的布局，但是遇到了麻烦。

我正在使用 WordPress 和 Bootstrap 来编写我的布局。这是我的代码（没有隐藏的溢出）。

CSS：

.container {
  clear: both;
  margin: 20px auto;
  width: 940px;
  background: #fff;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
/*   overflow-x: hidden; */
  *zoom: 1;
}

/* Ribbon 
-------------------------------------------------*/

.rectangle {
    background: #80D4F6;
    height: 50px;
    width: 970px;
    position: relative;
    left:-15px;
    top: 30px;
    float: left;
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
    -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.35);
    z-index: 100; /* the stack order: foreground */
    margin: -30px 0px 0px;
}

.rectangle h2 {
    font-size: 40px;
    font-family: 'Grand Hotel', cursive, Georgia, helvatica;
    color: #fff;
    padding-top: 6px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    text-align: center;
}

.rectangle h2 a{
    color: #FFFFFF;
}

.triangle-l {
    border-color: transparent #7d90a3 transparent transparent;
    border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
    position: relative;
    left: -30px;
    top: 35px;
    z-index: -1; /* displayed under bubble */
}

.triangle-r {
    border-color: transparent transparent transparent #7d90a3;
    border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
    position: relative;
    left: 940px;
    top: 5px;
    z-index: -1; /* displayed under bubble */
}

/* Footer
-------------------------------------------------*/

.site-footer{
    padding-top: 10px;
    background: #f6f6f6;
}

以下是 HTML 的格式：

<div class="container">
    <div class="row">
        <div class="span12">
            NAV
            <div class="rectangle"><h2>SITE TITLE</h2></div>
            <div class="triangle-l"></div> <!-- Left triangle -->
            <div class="triangle-r"></div> <!-- Right triangle -->
            SLIDESHOW
        </div>
    </div>
    <div class="row">
        <div class="span8">
            CONTENT
        </div>
        <div class="span4">
            SIDEBAR
        </div>
    </div>
    <footer class="site-footer" role="contentinfo">
        <div class="row">
            FOOTER
        </div>
    </div>
</div>

这个问题可以在这里看到（页脚的角不是圆的，因为我“隐藏”了溢出以允许显示功能区折叠）。

任何帮助将不胜感激。

4

1 回答 1

1

css在你的style.css文件中添加这个

.site-footer {
border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
}
于 2013-07-30T04:18:24.593 回答