Question

我有一个大于大多数屏幕宽度的标题。我把它集中在一起，我隐藏了溢出，所以当你在更大的屏幕上扩展你的浏览器时，更多的是可见的。我还有2个图像，一个向右浮动，一个向左浮动。我的问题是左边的图像是左边浮动的，但是右边的图像不会一直向右移动。如果我将两个图像放在同一个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>

Answer 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>

Answer 2

修订后的答案（为清楚起见删除了上一个答案）：

仔细观察下面评论中引用的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; }

标题浮动问题中的w图像

2 个答案: