我正在尝试建立我的第一个网站，但遇到了问题! 左侧和右侧框 - 名为“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 © <a href="#" title="black papiyon">blackpapiyon.com</a></p>
</footer>
</div>
</body>
</html> 最佳答案
您有许多问题需要在您的代码中解决。首先，给你的 <body> 是不明智的一个明确的宽度，除非你真的知道你在做什么。让浏览器做他们的事情并使用包装器 <div> , 而不是。
其次，在进行基于 float 的布局时，您的所有列都应该是 float 的，并且可能在同一方向上。未 float 的盒子将围绕 float 元素流动。也就是说，如果您只针对相当现代的浏览器，那么基于 flexbox 的布局会更好。
三、<content>标签在 Shadow DOM 内部使用，不是标准的 HTML 标签。此外，it’s been deprecated .使用 <div>相反。
我不知道这是否能完全解决您的问题，但至少会让您走上正轨。
关于html - CSS - 框内框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38840112/