html - CSS-盒子里面的盒子

我正在尝试建立我的第一个网站，但遇到了问题！
左侧和右侧的框（分别名为“ leftSidebar”和“ rightSidebar”）应该位于中间内容（在其左侧和右侧）旁边，但它们只是穿过身体而不在内部正文框（经过边框测试）。我究竟做错了什么？我希望左侧和右侧栏位于中间内容旁边！

而且，它们穿过箱体的底部一直到底部，当我向下滚动时，我的背景停止，出现白色背景！也许您可以根据自己的背景进行测试？

请尽快帮助我，已经忙了

谢谢

body {
	background-image: url(wp1.jpg);
	background-size: 100%;
    background-repeat: no-repeat;
	color: white;
}

.body {
	width: 70%;
	border: 1px solid white;
	margin: 5% auto;
	clear: both;

}

a {
	text-decoration: none;
}

nav ul li {
	list-style-type: none;
}

.navHeader nav ul li {
	float: left;
	display: inline;
	margin: 0 auto;
}

.navHeader nav {
	border-radius: 5px;
	border: 1px dashed white;
	height: 50px;
}

.navHeader {
	background-color: black;
}

.leftSidebar {
	float: left;
	border: 1px white solid;
	border-radius: 2px;
	margin: 2% 0 2% 2%;
	width: 20%;

}

.rightSidebar {
	float: right;
	border: 1px white solid;
	border-radius: 2px;
	margin: 2% 0 2% 2%;
	width: 20%;
}

.allContent {
	background-color: black;
	width: 60%;
	text-align: center;
	margin: 0 auto;
}

	<body class="body">

	<header class="navHeader">
		<nav><ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">News</a></li>
			<li><a href="#">Programming</a></li>
			<li><a href="#">Downloads</a></li>
			<li><a href="#">Contact</a></li>
		</nav></ul>
	</header>


		<aside class="leftSidebar">
			<content>
				<h3> Sidebar Left Title </h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</content>
		</aside>




		<aside class="rightSidebar">
			<content>
				<h3> Sidebar Right Title </h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</content>
		</aside>

	<div class="allContent">

		<article class="middleContent">
			<content>
				<h2> This Is A Post </h2>

					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</content>
		</article>


		<footer class="footerdown">
			<p>Copyright &copy; <a href="#" title="black papiyon">blackpapiyon.com</a></p>
		</footer>

	</div>


	</body>
</html>

最佳答案

您有许多需要在代码中解决的问题。首先，给<body>一个明确的宽度是不明智的，除非您真的知道自己在做什么。只需让浏览器完成任务并使用包装器<div>即可。

其次，在进行基于浮点的布局时，您所有的列都应该浮起，并且方向可能相同。未浮动的框将在浮动元素周围流动。就是说，如果您仅针对合理的现代浏览器，则基于Flexbox的布局会更好。

第三，<content>标记在Shadow DOM内部使用，不是标准的HTML标记。此外，it’s been deprecated。请改用<div>。

我不知道这可以完全解决您的问题，但至少可以使您走上正确的道路。

关于html - CSS-盒子里面的盒子，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38840112/