0

我有一个比大多数屏幕宽度都大的标题。我将其居中并隐藏了溢出，因此当您在更大的屏幕上展开浏览器时，可以看到更多内容。我还有两张图片，一张向右浮动，一张向左浮动。我的问题是左图像在左侧浮动，但右图像不会一直向右。如果我将两个图像都放在同一个 z-index 上，它们只是堆叠而不是左右浮动。有什么建议么？这是我的css和html：

 #triangleleft{
 width:100%;
 height:531px;
 z-index:58;
 position:absolute;
 top:+53px;
}

 #triangleright{
 width:100%;
 height:531px;
 z-index:59;
 position:absolute;
 top:+53px;
}

.triangleleft{
 background:url(Layer-58.png)no-repeat;
 float:left;
 margin-left:0px;
 height:531px;
 width:100%;
}

.triangleright{
 background:url(Layer-59.png)no-repeat;
 float:right;
 margin-right:0px;
 height:531px;
 width:100%;
}

 <div id="triangleleft">
 <div class="triangleleft"></div>
 </div>

 <div id="triangleright">
 <div class="triangleright"></div>
 </div>

这也是我认为搞砸的标题图片的代码

#wrapper {
 height:100%;
 position: relative;
}
#Layer-57 {
 position: relative;
 height:529px;
 background:#3b96a9 url(layer-57.jpg) top center no-repeat;
 top:-529px;
 overflow-x: hidden;
 z-index: 57;
}

<div id="wrapper"> <div id="Layer-57"></div> </div>
4

2 回答 2

1

用这个替换你的风格

<style>
#triangleleft {
    width:90%;
    height: 531px;
    z-index: 58;
    position: absolute;
    top: +53px;
}
#triangleright {
    width:90%;
    height: 531px;
    z-index: 59;
    position: absolute;
    top: +53px;
}
.triangleleft {
    background: url(Layer-58.png)no-repeat;
    float: left;
    margin-left: 0px;
    height: 531px;
    width: 100%;
}
.triangleright {
    background: url(Layer-59.png)no-repeat;
    float: right;
    margin-right: 0px;
    height: 531px;
    width: 100%;
}
</style>
于 2012-05-02T18:07:44.893 回答
0

修订后的答案（为清楚起见，删除了以前的答案）：

仔细查看您在下面的评论中引用的 leaderbe.com 页面，我注意到 div 的 HTML 结构与您所拥有的完全不同。您需要将 triangleright div 放入 triangleleft div 并使用如下样式：

看到这个jsfiddle：http: //jsfiddle.net/uKrNT/2/

<div id="wrapper"> <div id="Layer-57">layer 57</div> </div>

<div id="triangleleft">
     <div id="triangleright">
   </div>
 </div>


#triangleleft{
 width:100%;
 height:531px;
 z-index:58;
 position:absolute;
 top:+53px;
 float:left;
 background:red url(http://www.leaderbe.com/images/diamond-left.png)no-repeat;
 margin-left:0px;
    overflow:visible;
    opacity:.5;

}

 #triangleright{
 width:100%;
 height:531px;
 z-index:59;
 float:right;
 background:blue url(http://www.leaderbe.com/images/diamond-right.png)no-repeat;
 margin-right:0px;
    opacity: .5;
    overflow:visible;
}


#wrapper { height:100%; position: relative; }
#Layer-57 { position: relative; height:529px; background:#3b96a9 url(layer-57.jpg) top center no-repeat; top:-529px; overflow-x: hidden; z-index: 57; }
于 2012-05-02T18:23:06.340 回答