Question

很抱歉，我可能使用了错误的术语。但是我正在尝试编写消息传递用户界面的代码，当我将发件人消息浮动到右侧时，发往发件人的消息会被上推。

我在下面包括了一支代码笔，您可以在其中确切地看到我的意思。如果您从float: right;类中删除message-to，它将解决此问题，但不会像预期的那样正确。

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>

Answer 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>

Answer 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>

浮动div是否在不让div向上移动后正确吗？

2 个答案: