向右浮动？

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

我想出了我需要为此做些什么！

我最终将容器显示为柔性并将其与柔性端对齐。对于遇到此问题的其他人，这将为您提供所需的结果。

Here is a related article on align properties.