divs with vertical line

Question

私はこのイメージについて助けが必要です。誰かが私を助ける時間を与えるならば、私はどのようにCSSとHTMLでそれを設定することができます事前に感謝します。

Answer 1

画像は、backgroundの1つの要素とみなすことをお勧めします。次に、イメージの左半分だけを占めるその要素の子を作成します。これを達成するために、子供は次のスタイルを必要とします：

#child { 
    position: relative; /* To position the border in relation to the image parent */ 
    width: calc(50% - 2px); /* 2px correlates to the width of the border */ 
    height: 100%; /* To occupy the full height of the image */ 
} 

要素は目に見えない画像の左半分の上に座っている今、あなたがこのの右側に罫線を適用することができます要素はborder-right: 2px solid cyanです。

以下で見ることができるように、これは、途中の画像を通る線につながる：

#container { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: url(http://placehold.it/100); 
 
} 
 

 
#child { 
 
    position: relative; 
 
    width: calc(50% - 2px); 
 
    height: 100%; 
 
    border-right: 2px solid cyan; 
 
}

<div id="container"> 
 
    <div id="child"></div> 
 
</div>

・ホープ、このことができます！ :)

Answer 2

Obisidians答えは良いですが....私はそれが少しHTML要素を削除し、:beforeを使用して、背景画像を保ち、少しラインを処理することが微調整するつもりです異なり

#container { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: url(http:/fillmurray.com/300/200); 
 
    position:relative; 
 
} 
 

 
#container::before { 
 
    position: absolute; 
 
    left: calc(50% - 1px); 
 
    width:2px; 
 
    height: 100%; 
 
    background-color:cyan; 
 
    content: ''; 
 
} 
 

 
#container > div 
 
{ 
 
    background-color: rgba(255,255,255,0.5); 
 
    padding: 5px; 
 
}

<div id="container"> 
 
    <div>Some Content</div> 
 
</div>

a）のコーディングを開始：

あなたは子供の内容