1

div でスパンを作成しました。このスパンは、div の上に配置された単なる黒い境界線です。このスパン (黒い境界線) が div の幅と高さに適応するようにします。この div の内部の境界線のように。

私の問題は、境界線が div を超えていることです: http://jsfiddle.net/QHRYJ/

div {
    background: pink; 
    width: 300px; 
    height: 200px;
}

span {
    position: absolute;
    width: inherit; 
    border: 4px solid;
    margin: 10px;
    height: inherit;
}

-->-->-->--> *編集: 私が欲しいもの: http://www.hostingpics.net/viewer.php?id=623039div.png *

4

2 に答える 2

3

ただし、それでも自分のやり方で達成したい場合は、コメントがそれを物語っています。

div {
    position: relative;
    background: pink; 
    width: 300px; 
    height: 200px;
}

span {
    position: absolute;
    top:0 ;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid;
}

親の div に位置を与えて、その子要素が親の方向を向くようにする必要があります。次に、スパンが絶対に配置されるので、明示的に左、右、下、上を に設定するだけで拡張できます0。

span と div の間に間隔を置きたい場合は、span にマージンを追加します。

于 2013-10-30T12:49:18.080 に答える
1

ここにXY 問題があると思います。コメントで説明したことから (ホバー時に境界線を追加する)、そのための要素<div>は必要ありません。これは、疑似セレクター<span>を使用して実現できます。:hover例えば：

div:hover {
    border: 4px solid #000
}

ここにあるjsFiddle Demo

サイズが変更されないようにするbox-sizingには、次のように指定する必要があります。<div>

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
于 2013-10-30T12:49:59.823 に答える