向右漂？

Question

这是一个有点令人困惑的问题，但还是很有趣。

基本上，我是在网页边做一个动画保镖，就像在普通音乐播放器上发现的一样。动画很好，但我想让动画的div向右浮动而不浮动。如果div向右浮动，它们会显示出我想要的结果。然而，当宽度变小时，它们会附加到同一条线上，似乎会“抽动”并消失。

所以，我在寻找一种方法，让这些家伙在右边漂浮，而不会导致他们最终站在同一条线上。我还没有找到任何不以固定或绝对的位置结束的东西(这对总体布局不起作用，还会引起一大堆其他问题)。

下面的代码片段具有浮动的权利，以显示“抽搐”行为。

​

@keyframes lineBounce1 {
	to {
		width:60%;
	}
	from {
		width:10%;
	}
}

@keyframes lineBounce2 {
	to {
		width:80%;
	}
	from {
		width:30%;
	}
}

.playlist{
	display:inline-block;
	position:absolute;
	height:70%;
	width:30%;
	left:27%;
	top:7%;
	text-align:center;
	min-height:300px;
	min-width:400px;
	background-color:white;
	overflow-y:auto;
	overflow-x:hidden;
}

.playhead {
	height:20%;
	width:100%;
}

.bounce {
	height:100%;
	width:20%;
	float:right;
}

.lineDance1 {
	display:block;
    float:right;
	margin-top:5px;
	height:5%;
	background-color:rgb(153, 000, 000);
	animation-direction:alternate;
	animation-duration:500ms;
	animation-iteration-count:infinite;
	animation-name:lineBounce1;
}

.lineDance2 {
	display:block;
    float:right;
	margin-top:5px;
	height:5%;
	background-color:rgb(153, 000, 000);
	animation-direction:alternate;
	animation-duration:750ms;
	animation-iteration-count:infinite;
	animation-name:lineBounce2;
}

<span class="playlist">
		<div class="playhead">
			<span>
			</span>
			<span class="bounce">
				<div class="lineDance1"></div>
				<div class="lineDance2"></div>
			</span>
		</div>
		<div id="playlist">
		</div>
	</span>

​

编辑:只是澄清，因为我觉得我不是很清楚.

我希望他们从播放列表的右边开始，然后“向左弹跳”(展开)。目前，他们是在左边的跨度和“反弹”(扩展)向右。

Answer 1

我想出了我该怎么做！

最后，我将容器显示为一个flex，并将其与flex末端对齐。这将为其他处理此问题的人提供所需的结果。

这是一篇关于对齐属性的相关文章。