内容超过水平时间轴

Question

我尝试创建一个水平时间轴，如下图所示。

但是，我试图找到以响应方式执行此操作的最佳方式。谁能帮忙。我已经创建了如下的水平时间轴。

＆＃13;

＆＃13;

<div class="horizontal-timeline">
  <div class="arrow-up" style="left: 20%;"></div>
  <div class="arrow-up" style="left: 60%;"></div>
  <div class="arrow-down" style="left: 40%;"></div>
  <div class="arrow-down" style="left: 80%;"></div>
</div>

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
             android:src="@drawable/bigimage" />
    </HorizontalScrollView>

</ScrollView>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将像素值替换为视口高度和宽度。 这是一个例子，随意玩这些价值观，看看你最喜欢什么。

＆＃13;

＆＃13;

body {
  padding-top: 30px;
}

.horizontal-timeline {
  position: relative;
  height: 1vh;
  background: #29AAE3;
  margin: 0;  
}

.arrow-up, .arrow-down {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 2vw solid transparent;
  border-right: 2vw solid transparent;
  vertical-align: baseline;
}

.arrow-up {
  top: -2vw;
  border-bottom: 2vw solid #29AAE3;
}

.arrow-down {
  bottom: -2vw;
  border-top: 2vw solid #29AAE3;
}

＆＃13;

<div class="horizontal-timeline">
  <div class="arrow-up" style="left: 20%;"></div>
  <div class="arrow-up" style="left: 60%;"></div>
  <div class="arrow-down" style="left: 40%;"></div>
  <div class="arrow-down" style="left: 80%;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;