1

私は1000pxの固定幅ページの左右に沿って退屈な破線（カスタム）を実現しようとしています。

左のものは大丈夫です、これは御馳走になります：

#border-left{
position: absolute;
float:left;
top: 0px;
bottom: 0;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}

しかし、右側でやり直すと、うまくいきません。ウィンドウではなく、1000pxの比較的右側に配置する必要があります。

#border-right{
position: relative;
right: 0;
top: 0;
bottom: 0;
margin-top: -90px;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}

親要素：

#container{
width:1000px;
display: block;
margin:0px auto;
text-align:left;
padding-top:90px;
}

それは機能しません。これを達成できますか？基本的にフロートする必要があります：そうです（しかし、ブラウザウィンドウの高さを100％にすることはできません）。ありがとう

4

2 に答える 2

2

デモ： http： //jsfiddle.net/iambriansreed/sAhmc/

絶対要素のフロートを削除しました。親に絶対位置を追加し、左とマージンを使用して中央に配置しました。右側の境界の不要なマージントップを削除しました。境界IDをクラスに置き換えました。

境界線は1000px幅の外側にあります。

#container>.border{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    background-image: url('../img/border.gif');
    background-repeat:repeat-y;
}
#container>.border.left{
    left: -5px;
    background-color: red; /* demo */
}
#container>.border.right{
    right: -5px;
    background-color: blue; /* demo */
}
#container{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px; /* demo */
    left: 50%;
    margin-left: -50px; /* half of width */
    text-align: left;
    padding-top: 90px;
    overflow: visible;
    background: #eee; /* demo */
}​
于 2012-09-10T15:18:04.700 に答える
1

「位置：相対;」を追加すると思います。#container要素のルールが機能するはずです。

于 2012-09-10T15:15:09.207 に答える