html - flexbox：如何在同一行中将 1 个 div 左对齐和 1 个 div 右对齐

问题描述

我在顶部有 div 顶部栏和 div 菜单，顶部栏下的 div 内容和内容在网站的左侧。我正在尝试将 div 侧边栏添加到内容中。我使用了几种方法仍然找不到解决方案。我认为某些代码行会阻止该空间对内容的访问权，但 idk。我使用红色边框来帮助我进行网站定位。

body
{
	font-family: 'Abel', sans-serif;
	margin: 0 auto;
	background-color: #008000;
}

.flexbox-container
{
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding-bottom: 20px;
	border: 2px solid red;
}

.flexbox-container div.topbar
{
	height: 50px;
	text-align: center;
	font-size: 110%;
	font-family: 'Montserrat', sans-serif;
	border: 2px solid red;
}

.flexbox-container div.menu
{
	height: 20px;
	background-color: #228B22;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	word-spacing: 20px;
	letter-spacing: 1px;'
	border: 2px solid red;
}

a:link, a:visited
{
	text-decoration: none;
	color: #010f00;
}

a:hover
{
	color: gray;
}

li
{
	display: inline-block;
	padding-left: 15px;
	padding-right: 30px;
	border-right: solid 1px black;
	list-style-type: none;
} 

li:first-child
{
	padding-left: 30px;
	padding-right: 30px;
	border-left: solid 1px black;
}

.flexbox-container div.menu p
{
		margin: 0;
		color: yellow;
		border: 2px solid red;
}

.flexbox-container div.content
{
	margin-top: 25px;
	background-color: #228B22;
	height: 550px;
	text-align: center;
	width: 60%;
	border: 2px solid red;
}

.flexbox-container div.sidebar
{
	margin-top: 25px;
	background-color: #228B22;
	text-align: center;
	height: 550px;
	width: 10%;
	border: 2px solid red;
	float: right;
}

<!DISCODE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<title>Piotr Nowak - Portfolio</title>
	<meta name="description" content="piotr nowak, programista backendowy freelancer" />
	<meta name="keywords" content="programista, backend, freelancer, portfolio, web" />
	<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> 
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
</head>
<body>
	<div class="flexbox-container">
		<header>
			<div class="topbar">
				<h1><a href="index.html">ZlotyKot Trafika</a></h1>
			</div>
		</header>
		<nav>
			<div class="menu">
				<ul>
					<li><a href="aktualnosci.html" alt="_blank">Aktualności</a></li>
					<li><a href="oferta.html" alt="_blank">Oferta</a></li>
					<li><a href="nowosci.html" alt="_blank">Nowości</a></li>
					<li><a href="kurier.html" alt="_blank">Kurier</a></li>
					<li><a href="fotogaleria.html" alt="_blank">Fotogaleria</a></li>
					<li><a href="kontakt.html" alt="_blank">Kontakt</a></li>
				</ul>
			</div>
		</nav>
		<main>
			<div class="content">
				<h1>Lorem ipsum. </h1>
				<br> </br>
				<br> </br>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat.  <br> </br>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat.  <br> </br>
					Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas fermentum malesuada orci. Suspendisse nec quam vitae ex lacinia tincidunt in sit amet felis. Cras ac varius neque. Donec ullamcorper, diam id blandit blandit, mi massa consectetur nibh, eget porttitor nibh diam quis felis. Donec arcu neque, vulputate quis felis a, tincidunt tempus sapien. Aliquam tortor nulla, porta vitae eros sit amet, fermentum maximus mi. Morbi ac tincidunt lacus, maximus ultrices eros. In vehicula tempus dictum. 
					Mauris quis aliquam magna. Morbi diam nisl, pharetra sed suscipit vel, dictum eu enim. Sed eu risus non ex porta venenatis elementum ultrices augue. Nam non vulputate ante, eget porttitor ante. Fusce eget lectus in orci ullamcorper sollicitudin a id erat. Morbi vestibulum risus sed iaculis dictum. Aliquam id malesuada est. Donec venenatis commodo turpis sed placerat. Curabitur vulputate varius ligula non feugiat. Cras vulputate faucibus odio a posuere. 
			</div>
		</main>
			<div class="sidebar">
			</div>
	</div>
</body>
</html>

标签： htmlcssflexbox

解决方案

这是你想要的吗？

  body
{
	font-family: 'Abel', sans-serif;
	margin: 0 auto;
	background-color: #008000;
}

.flexbox-container
{
	display: flex;
	flex-direction: row;
	height: 100vh;
	padding-bottom: 20px;
	border: 2px solid red;
}

.flexbox-container div.topbar
{
	height: 50px;
	text-align: center;
	font-size: 110%;
	font-family: 'Montserrat', sans-serif;
	border: 2px solid red;
}

.flexbox-container div.menu
{
	height: 20px;
	background-color: #228B22;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	word-spacing: 20px;
	letter-spacing: 1px;'
	border: 2px solid red;
}

a:link, a:visited
{
	text-decoration: none;
	color: #010f00;
}

a:hover
{
	color: gray;
}

li
{
	display: inline-block;
	padding-left: 15px;
	padding-right: 30px;
	border-right: solid 1px black;
	list-style-type: none;
} 

li:first-child
{
	padding-left: 30px;
	padding-right: 30px;
	border-left: solid 1px black;
}

.flexbox-container div.menu p
{
		margin: 0;
		color: yellow;
		border: 2px solid red;
}

.flexbox-container div.content
{
	margin-top: 25px;
	background-color: #228B22;
	height: 550px;
	text-align: center;
	width: 60%;
	border: 2px solid red;
}

.flexbox-container div.sidebar
{
	margin-top: 25px;
	background-color: #228B22;
	text-align: center;
	height: 550px;
	width: 10%;
	border: 2px solid red;
	float: right;
}

<!DISCODE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<title>Piotr Nowak - Portfolio</title>
	<meta name="description" content="piotr nowak, programista backendowy freelancer" />
	<meta name="keywords" content="programista, backend, freelancer, portfolio, web" />
	<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> 
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
</head>
<body>
	<div class="flexbox-container">
		<header>
			<div class="topbar">
				<h1><a href="index.html">ZlotyKot Trafika</a></h1>
			</div>
		</header>
		<nav>
			<div class="menu">
				<ul>
					<li><a href="aktualnosci.html" alt="_blank">Aktualności</a></li>
					<li><a href="oferta.html" alt="_blank">Oferta</a></li>
					<li><a href="nowosci.html" alt="_blank">Nowości</a></li>
					<li><a href="kurier.html" alt="_blank">Kurier</a></li>
					<li><a href="fotogaleria.html" alt="_blank">Fotogaleria</a></li>
					<li><a href="kontakt.html" alt="_blank">Kontakt</a></li>
				</ul>
			</div>
		</nav>
		<main>
			<div class="content">
				<h1>Lorem ipsum. </h1>
				<br> </br>
				<br> </br>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat.  <br> </br>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at augue sollicitudin, malesuada lorem id, gravida arcu. Nam metus arcu, elementum vel vulputate in, hendrerit et turpis. Morbi mattis purus ipsum, vitae blandit orci accumsan vel. Aliquam varius eleifend euismod. Curabitur varius fermentum massa, in finibus lacus cursus rutrum. Aenean quis semper nisi. In id fringilla mauris. Proin et massa lobortis, blandit massa sit amet, congue ante. Aliquam erat volutpat.  <br> </br>
					Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas fermentum malesuada orci. Suspendisse nec quam vitae ex lacinia tincidunt in sit amet felis. Cras ac varius neque. Donec ullamcorper, diam id blandit blandit, mi massa consectetur nibh, eget porttitor nibh diam quis felis. Donec arcu neque, vulputate quis felis a, tincidunt tempus sapien. Aliquam tortor nulla, porta vitae eros sit amet, fermentum maximus mi. Morbi ac tincidunt lacus, maximus ultrices eros. In vehicula tempus dictum. 
					Mauris quis aliquam magna. Morbi diam nisl, pharetra sed suscipit vel, dictum eu enim. Sed eu risus non ex porta venenatis elementum ultrices augue. Nam non vulputate ante, eget porttitor ante. Fusce eget lectus in orci ullamcorper sollicitudin a id erat. Morbi vestibulum risus sed iaculis dictum. Aliquam id malesuada est. Donec venenatis commodo turpis sed placerat. Curabitur vulputate varius ligula non feugiat. Cras vulputate faucibus odio a posuere. 
			</div>
		</main>
			<div class="sidebar">
			</div>
	</div>
</body>
</html>

html - flexbox：如何在同一行中将 1 个 div 左对齐和 1 个 div 右对齐

问题描述

解决方案

推荐阅读