如何在响应式网站中创建一条连接两个图像的行？

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>