Question

我试图建立我的第一个网站，但我遇到了问题！左右框 - 命名为＆＃34; leftSidebar＆＃34;和＆＃34; rightSidebar＆＃34; - 应该是在中间内容的旁边（在它的左侧和右侧），但是它们只是穿过身体并且不在身体框内（用边框测试）。我究竟做错了什么？我希望左侧和右侧栏位于中间内容旁边！

此外，他们穿过车身箱到目前为止到底部，当我向下滚动时 - 我的背景停止并出现白色背景！也许你可以用自己的背景来测试它？

请尽快帮助我，goin cray已经

由于

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

其次，在进行基于浮动的布局时，所有列都应该浮动，并且可能在同一方向上。未浮动的盒子将围绕浮动元素流动。也就是说，如果您只针对合理的现代浏览器，那么基于Flexbox的布局会更好。

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

我不知道这会完全解决您的问题，但它至少会让您走上正确的轨道。

CSS - 盒子里面的盒子

1 个答案: