0

まあ、これは私が欲しいものです：

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

これは私が望むことです。唯一のことは、バナーの高さと同じように、エッジの高さが動的でなければならないということです。解決策はありますか？

4

2 に答える 2

2

あなたの HTML は少し怖く見えます。全体をラッパーに入れて、ラッパーごとにスケーリングしてみてください。2 つの色を実現するために、ここでは 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-15T11:18:06.107 に答える
1

このフィドルを参照してください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-15T11:20:17.537 に答える