浮动 div 右而不允许 div 之后向上移动？答案

【问题标题】：Floating div right without allowing the div after to move up?浮动 div 右而不允许 div 之后向上移动？
【发布时间】：2018-10-22 06:24:10
【问题描述】：

我可能使用了错误的术语，我深表歉意。但我正在尝试编写一个消息传递 UI，当我将发件人的消息浮动到右侧时，发送给发件人的消息会被向上推送。

我在下面添加了一个代码笔，您可以在其中准确了解我的意思。如果您从 message-to 类中删除 float: right;，那么它将解决问题，但不会像预期的那样向右移动。

html, body {
	background-color: red !important;
	height: 100%;
}

.messages-wrapper {
	padding: 20px 20px 0px 20px;
	background-color: #fff;
	width:448px;
	height: 100%;
}

.message {
	width: 300px;
	padding: 12px 15px 12px 15px;
	border-radius: 3px;
	margin-top:10px;
}

.message-to {
	background-color: #2C7CFF;
	color: #fff;
	float:right;
}

.message-from {
	background-color: #ebebeb;
}

<!DOCTYPE html>
<html lang="en-GB">
<head>
	<title>- NULL -</title>
	<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="css/override.css" type="text/css">
</head>
<body>
	<div class="messages-wrapper">
		<div class="message message-to">
			Hey man, how was your day after?
		</div>
		<div class="message message-to">
			Can you also bring your charger when you come round?
		</div>
		<div class="message message-from">
			It was alright, I'll tell you all about it later! No problem, I'm on my way now.
		</div>
	</div>
</body>
</html>

【问题讨论】：

请添加一个最小的工作代码 sn-p 以便我们可以真正帮助您
我做了并得到了答案，我决定删除它。
所以你破坏了这个问题。您可以将问题恢复到原来的状态，也可以详细说明您想要什么，删除整个问题，否则它很可能会被删除
这是我的问题，我会用它做我想做的事。我不想让它恢复到原来的状态。 SO拒绝删除它，因为它有答案。随意删除它。

标签： html css

【解决方案1】：

您可以将clear:both 添加到您的消息框

html, body {
	background-color: red !important;
	height: 100%;
}

.messages-wrapper {
	padding: 20px 20px 0px 20px;
	background-color: #fff;
	width:448px;
	height: 100%;
}

.message {
	width: 300px;
	padding: 12px 15px 12px 15px;
	border-radius: 3px;
	margin-top:10px;
  clear:both;
}

.message-to {
	background-color: #2C7CFF;
	color: #fff;
	float: right;
}

.message-from {
	background-color: #ebebeb;
  float: left;
}

<!DOCTYPE html>
<html lang="en-GB">
<head>
	<title>- NULL -</title>
	<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="css/override.css" type="text/css">
</head>
<body>
	<div class="messages-wrapper">
		<div class="message message-to">
			Hey man, how was your day after?
		</div>
		<div class="message message-to">
			Can you also bring your charger when you come round?
		</div>
		<div class="message message-from">
			It was alright, I'll tell you all about it later! No problem, I'm on my way now.
		</div>
	</div>
</body>
</html>

【讨论】：

感谢您的回答，直到发件人消息不遵循 message 类的 margin-top: 10px; 规则之前，一切似乎都很好。这有关键原因吗？将它分配给它自己的类也不允许 div 向下移动。
发生这种情况是因为 .message-to 元素是浮动的，而 .message-from 元素不是。我在上述答案中为.message-from 元素添加了float:left，这解决了您的问题。

【解决方案2】：

html, body {
	background-color: red !important;
	height: 100%;
}

.messages-wrapper {
	padding: 20px 20px 0px 20px;
	background-color: #fff;
	width:448px;
	height: 100%;
  display: flex;
  flex-direction: column;
}

.message {
	width: 300px;
	padding: 12px 15px 12px 15px;
	border-radius: 3px;
	margin-top:10px;
}

.message-to {
	background-color: #2C7CFF;
	color: #fff;
	float:right;
}

.message-from {
	background-color: #ebebeb;
}

<!DOCTYPE html>
<html lang="en-GB">
<head>
	<title>- NULL -</title>
	<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="css/override.css" type="text/css">
</head>
<body>
	<div class="messages-wrapper">
		<div class="message message-to">
			Hey man, how was your day after?
		</div>
		<div class="message message-to">
			Can you also bring your charger when you come round?
		</div>
		<div class="message message-from">
			It was alright, I'll tell you all about it later! No problem, I'm on my way now.
		</div>
	</div>
</body>
</html>

【讨论】：