橫幅autoheighted邊緣（絕對位置）

好了，這是有點我想：橫幅autoheighted邊緣（絕對位置）

<body style="background-color: green;"> 
<div style="float: left; height: 40px; width: 50%; background-color: white;"></div> 
<div style="float: left; height: 40px; width: 50%; background-color: black;"></div> 
<div style="position: absolute; left: 50%;"> 
    <div style="position: relative; left: -50%; border: dotted yellow 1px; background-color: green;"> 
     <img src="http://prog.hu/site/images/logo.gif" width="100%" /> 
    </div> 
</div> 
</body>

http://jsfiddle.net/g4EEc/2/

此我想要做什麼，唯一的事情是邊緣的高度必須是動態的，如高度爲橫幅。有解決方案嗎？

來源

2013-05-15 user1929946

不明白你想達到什麼？讓我知道 –

我不知道你在問什麼。請澄清問題是什麼以及你想達到什麼目的。你指的是哪個「邊緣」 – Timidfriendly

請具體說明你想知道的內容。 –

看到這個小提琴http://jsfiddle.net/g4EEc/3/

代碼

<body style="background-color: green;"> 
<div style="overflow:hidden;background:#ccc;position:relative;z-index:34"> 
    <div style="height:1000px;width:50%;background:#fff;position:absolute;top:0;left:0;z-index:-2"></div> 
    <div style="height:1000px;width:50%;background:#000;position:absolute;top:0;right:0;z-index:-2"></div> 
    <img src="http://prog.hu/site/images/logo.gif" style=" border: dotted yellow 1px; background-color: green;display:block;margin:0 auto;z-index:34;"/> 
</div>

來源

2013-05-15 11:20:17

您的HTML看起來有點可怕。嘗試將整體放入包裝中並通過包裝來縮放。爲了實現這兩種顏色，我在這裏使用了css3漸變。

<div class="outerwrapper">  
<div class="wrapper"> 
    <img src="http://prog.hu/site/images/logo.gif" width="100%" /> 
</div> 
</div><!-- outer wrapper -->

和CSS：

.outerwrapper{ 
    height:15%; 
    display: block; 
    width: 100%; 
    background: linear-gradient(to right, #fff 0%,#fff 50%,#000 51%,#000 100%); 
    background: -webkit-linear-gradient(left, #fff 0%,#fff 50%,#000 51%,#000 100%); 
} 
.wrapper{ 
    display:block; 
    background: green; 
    width: 33%; 
    margin: 0 auto; 
    height: 100%; 
} 
.left{ 
    display: block; 
    float: left; 
    width: 33%; 
} 
.right{ 
    display: block; 
    float: left; 
    width: 33%; 
}

http://jsfiddle.net/w639Z/

我也真的建議你不要寫聯，而不是使用單獨的CSS樣式。

來源

2013-05-15 11:18:06 abimelex

橫幅autoheighted邊緣（絕對位置）

回答

相關問題