3

ねえ、私はこの構造について少し確信が持てません。基本的に、4つのdivが必要です。

<div class="container">
    <div class="top-border"></div>
    <div class="box"></div>
    <div class="bottom-border"></div>
</div>

コンテナには 3 つの小さな div が含まれています。私の目標は、ボックス div にコンテンツを保持させ、ボーダー div でボックスの周りにブラケットを作成することです。Border-top は左にフロートし、border-bottom は右にフロートします。唯一の問題は、コンテナがボトム ブラケットに重なりますが、トップには重ならないことです。どちらも重ならないようにしたいです...これを修正する方法はありますか？

ここに JsFiddle があります: http://jsfiddle.net/6ghzN/

4

4 に答える 4

5

下枠の div で、変更します

margin-top: -40px;

に

margin-bottom: -8px;
于 2013-06-11T18:29:41.413 に答える
2

私は別の道を行くだろう、

追加するだけ.box:beforeで.box:after

このようにして、余分な div をすべてマークアップする必要がなくなります。

.container{
    background:#dedede;
    width:80%;
    height:auto;
    float:left;
}
.box{
    height:800px;
    width:100%;
    color:#cecece;
    float:left; 
    position:relative;
}
.box:before{
    content: "";
    width: 40px;
    height: 40px;
    border-left: 8px solid gray;
    border-top: 8px solid gray;
    position: absolute;
    left: -8px;
    top: -8px;
}
.box:after{
    content: "";
    width: 40px;
    height: 40px;
    border-right: 8px solid gray;
    border-bottom: 8px solid gray;
    position: absolute;
    right: -8px;
    bottom: -8px;
}

http://jsfiddle.net/6ghzN/11/

于 2013-06-11T18:35:24.370 に答える
0

margin-bottom: -10px;下枠クラスに追加します。

jsfiddle

于 2013-06-11T18:29:57.953 に答える