我正在创建的html5和CSS3流畅布局
外包装=深绿色
内部内容的边框=黄色
问题在于内部元素正在脱离外部父包装器和border div。
我希望能够彼此具有两个父元素，可以使用阴影和边框设置样式并提供纯背景颜色。这样，我可以更改内部内容的宽度，以提供带有阴影，模糊等额外功能的漂亮边框。我喜欢更改外部容器，这使布局更具灵活性。
每当我尝试创建这样一个流畅的布局时，外部div就会被打破，并使它们缩小到所有其他元素下方的页面顶部。这完全违背了我要实现的目标。
以下是html和嵌入式CSS。我仅将其嵌入到此页面中，以使其在设计阶段更易于使用。
如何在父包装和边框内放置所有元素？
我正在尝试给边界类“ .wrapper .border {”添加98％的宽度。这将显示父包装的2％，然后显示.border的直接子元素的另外98％，以便在第一个边界内有第二个边界。
在查看页面时，页面的外部看起来好像有两个边框，宽度为960px。一个盒子里的一个盒子里的一个盒子。最后一个内部框内的所有元素都在页面中一直对齐并居中。
在保持流畅的布局的同时，我无法使它正常工作。我将添加媒体查询以使其成为响应式布局，但是我需要首先使其工作。
任何关于为什么不起作用以及我需要在html和css中进行更改的帮助和说明都很棒。
<!doctype html>
<html lang="en">
<head>
<title>Please help fix this layout</title>
<style type="text/css">
.wrapper {
background-color: green;
width: 100%;
margin:0 auto;
max-width: 960px;
margin:0 auto;
}
.border {
width: 98%;
background-color: yellow;
border-color: gray;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
-khtml-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
margin: 0 auto;
}
.header{
width: 98%;
height: 182px;
background-color: #9F0;
margin: 0 auto;
}
.border .nav ul{
background: #000;
width: 100%;
height: 40px;
margin: 0 auto;
}
.border .nav ul li{
display: inline;
margin: 0 0 0 5px;
}
.nav ul li a:link, .nav ul li a:hover, .nav ul li a:active{
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
text-decoration: none;
}
.main-content {
width: 65%;
float: left;
}
article {
background: #0FF;
color: #000;
padding: 10px;
}
.sidebar{
width: 21%;
float: left;
background-color: #FC0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 0 0 2% 3%;
padding: 2% 3%;
}
.sidebar2{
width: 21%;
float: left;
background-color: #FC0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 0 0 2% 3%;
padding: 2% 3%;
}
h1 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #8B0000;
padding-left: 10px;
}
.wrapper .main-footer{
float: left;
width: 100%;
height: 40px;
background-color: #666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 2% 0;
}
.wrapper .main-footer p{
width: 92%;
height: 40px;
margin: 10px auto;
color: #FFF;
}
</style>
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div class="border">
<div class="header">
<p class="headText">This is header TEXT</p>
</div>
<nav class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="main-content">
<article class="text">
<header>
<h1>Lorem ipsum dolor sit amet</h1>
</header>
<footer>
<h2>Ipsam ornatam regis</h2>
</footer>
<content>
<p>Neptuno ait Cumque ego illum ille. Praesta enim est in lucem concitaverunt in. Tollite autem Apolloni ex hic.</p>
<p>Inde flammis ingreditur ad nomine Stranguillio in modo, quique non solutionem innocentem si Ave mea Stet. Ait mea in deinde vero quo contra te finis laeta gavisus ait Cumque hoc ambulare in rei sensibilium iussit in. Christe in modo genito in deinde plectrum anni ipsa codicellos pedes apud libram dabo es audito doctrinis beneficio. Reflexio mihi Tyrum in fuerat eum istam vero diam nostra paupercula possunt in. Petentibus respiciens loco balbutienti servis meo in deinde vero diam nostra praedicabilium subsannio, 'Non potentia feugiat o sanguine concomitatur quia illum vero diam dominum depressit. Sciendum ait mea vero cum. Cui ubi diu perdidi si Ave, die attingit Archistrate tabulas rimatur aurum. Praestetur cubiculo forma non ait mea in modo invenit. 'arripuit plorabis filiam in rei civibus laude clamaverunt donavit beneficio..</p>
</content>
</article>
<article class="text">
<header>
<h1>Lorem ipsum dolor sit amet</h1>
</header>
<footer>
<h2>Ipsam ornatam regis</h2>
</footer>
<content>
<p>Neptuno ait Cumque ego illum ille. Praesta enim est in lucem concitaverunt in. Tollite autem Apolloni ex hic.</p>
<p>Inde flammis ingreditur ad nomine Stranguillio in modo, quique non solutionem innocentem si Ave mea Stet. Ait mea in deinde vero quo contra te finis laeta gavisus ait Cumque hoc ambulare in rei sensibilium iussit in. Christe in modo genito in deinde plectrum anni ipsa codicellos pedes apud libram dabo es audito doctrinis beneficio. Reflexio mihi Tyrum in fuerat eum istam vero diam nostra paupercula possunt in. Petentibus respiciens loco balbutienti servis meo in deinde vero diam nostra praedicabilium subsannio, 'Non potentia feugiat o sanguine concomitatur quia illum vero diam dominum depressit. Sciendum ait mea vero cum. Cui ubi diu perdidi si Ave, die attingit Archistrate tabulas rimatur aurum. Praestetur cubiculo forma non ait mea in modo invenit. 'arripuit plorabis filiam in rei civibus laude clamaverunt donavit beneficio..</p>
</content>
</article>
</div>
<aside class="sidebar">
<h2>Side1 Content</h2>
</aside>
<aside class="sidebar2">
<h2>Side2 Content</h2>
</aside>
</div>
<footer class="main-footer">
<p>Footer Text HERE</p>
</footer>
</div>
</body>
</html>
最佳答案
我在youtube上找到了答案，这是一个长达8分钟的视频，其中详细介绍了较旧的浏览器，但这适用于我尝试过的所有浏览器。 Video link
将其添加到CSS的所有类中，这些类是要浮动的元素的容器，现在浮动的元素将包含在这些容器中。
.NameOfContainer:after{
content: ".";
visibility: hidden;
height: 0;
clear:both;
display: block;
}
关于css - 如何修复CSS3灵活布局的子元素脱离父项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17309903/