8

私は次のHTML構造を持っています

<div id='parent'>
    <div id='child-1'>Some text goes here</div>
    <div id='child-2'>Different text goes here</div>
    <div class='clear'></div>
</div>

次のCSSもあります

#parent {
    width: 800px;
    position: relative;
}

#child-1 {
    width: 500px;
    float: left;
}

#child-2 {
    width: 200px;
    float: left;
}

.clear {
    clear: both;
}

ここで、子 DIV ( child-1およびchild-2 ) の内容は何でもかまいません。したがって、最終的には、child-1 の高さが child-2 よりも長くなるか、child-2の高さがchild-1よりも長くなる可能性があります。

私がやりたいのは、child-1とchild-2の間に垂直線を引くことです。この線には、高さの長い DIV の長さがあります。両方の DIV の境界線を試しました ( child-1 の右境界線とchild-2 の左境界線) が、これは良い考えではありません。部。

どうやってやるの？また、可能であれば CSS のみを使用し、jQuery も JavaScript も使用しないようにしています。追加の DIV が必要だと思われる場合は、これで問題ありません。

ありがとう。

4

4 に答える 4

16

両方の div で境界線を試しました (child-1 の右境界線と div-2 の左境界線ですが、これは良い考えではありません。2 つの div が互いに接触する場所では線が太く表示され、拡張部分では線が細くなるためです)。 .

実際、それは良い方法です。ただし、最後のステップは、2 つの境界線が重なるように、右側の div に 1px の負の左マージンを与えることです (境界線の幅が 1px であると仮定します)。

#child-1 {
    width: 500px;
    float: left;
    border-right: 1px solid gray;
}

#child-2 {
    width: 200px;
    float: left;
    border-left: 1px solid gray;
    margin-left: -1px;
}

別のオプションはdisplay: table、親で使用してdisplay: table-cellから列で使用し、それらの間に単一の境界線を設定することです。

于 2013-08-04T03:40:59.210 に答える
4

シンプルなもの：

elements {
  border-left: black solid 1px;
}

elements:nth-child(1) {
  border-left: none;
}
于 2016-11-29T21:45:14.033 に答える
2

使ってみてください

border-left:1px solid #color;
margin-left:2px;

と

border-right:1px solid #color;
margin-right:2px;
于 2013-08-04T03:36:54.143 に答える