如何在響應式網站中創建一條連接兩個圖像的行？

Question

有人知道如何實現嗎？

該網站正在使用引導程序4，並且這些行必須能夠在超小屏幕上消失。

Answer 1

這應該有所幫助。

http://codepen.io/pranesh-r/pen/xEOAOm

用圖片替換div.circle 。

Answer 2

如果最終結果像您的草圖一樣，您可以嘗試將這些線條視為簡單div的邊界，而CSS則類似於

.div-top{
  width: 100% /*resize this to adapt it*/
  height: 20px; /*give correct value*/
  border-bottom: 1px solid black; /*for example*/
  border-left: 1px solid black; /*for example*/
}
.div-bottom{
  width: 100% /*resize this to adapt it*/
  height: 20px; /*give correct value*/
  border-right: 1px solid black; /*for example*/
}

您可以按照以下示例構建所需的所有行。 HTML代碼必須是這樣的

<div class="div-top"></div>
<div class="div-bottom"></div>