Html 页面结构未按预期排列
我对CSS（第一次体验）有意见，我试图调整我创建的部分。我有一个主Html 页面结构未按预期排列,html,css,Html,Css,我对CSS（第一次体验）有意见，我试图调整我创建的部分。我有一个主，它位于其他几个嵌套的和一个中。我试图将放在页面的右侧，同时保持在彩色边框内。随附的图片显示了我的目的 我试过在CSS工作表的侧边和博客容器部分使用float:left和float:right，也试过在侧边使用float:right，但没有达到我的目的。我设法把它放在我想要的地方，但这会弄乱我的主。有人能帮忙吗？“designed.png”是我拍摄的目的。代码如下。非常感谢你的帮助 index.php： <!doctype
侧边和博客容器部分使用float:left
和float:right
，也试过在侧边使用float:right
，但没有达到我的目的。我设法把它放在我想要的地方，但这会弄乱我的主
。有人能帮忙吗？“designed.png”是我拍摄的目的。代码如下。非常感谢你的帮助
index.php：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="myStyle2.css" type="text/css" media="screen" />
<title>Page Title</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--Page header goes here-->
<section id="top">
<header>
<!--Logo here -->
</header>
<!--Navigation Menu here -->
<nav>
<?php include('menu.php'); ?>
</nav>
</section>
<section id="main">
<section id="blogcontainer">
<section id="blogpost">
<article>
<header>
<h2>Blog Post Title Here</h2>
</header>
<p>Blog post contents here</p>
<article>
</section>
<section id="comments">
<article>
<header>
<h2>Comment Title 1</h2>
</header>
<p>Comment content 1</p>
</article>
<article>
<header>
<h2>Comment Title 2</h2>
</header>
<p>Comment content 2</p>
</article>
<article>
<header>
<h2>Comment Title 3</h2>
</header>
<p>Comment content 3</p>
</article>
</section>
<section id="commentsform">
<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Name:</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail:</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Website:</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Comment:</label>
<textarea name="comment" id="comment" required></textarea>
</p>
</form>
</section>
</section>
<aside id="rightaside">
<section>
<header>
<h3>Recent Posts</h3>
</header>
<ul>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
<li><a href="#">Post 3</a></li>
<li><a href="#">Post 4</a></li>
</ul>
</section>
<section>
<header>
<h3>Recommended Sites</h3>
</header>
<ul>
<li><a href="http://www.stackoverflow.com">StackOverflow.Com</a></li>
</ul>
</section>
</aside>
</section>
<footer>
</footer>
</body>
</html>
这就是下文的意图。以上是不利的结果。
您只需将#blogcontainer
向左浮动即可。原因是，块元素将占据页面的整个宽度。浮动它会将其宽度折叠为其内容，允许边线上升到您想要的位置
要获取包含元素的#main
，可以添加溢出：自动其目的是父元素不会扩展为包含浮动元素。溢出表示元素应展开以包含溢出的元素。您只需向左浮动#blogcontainer
。原因是，块元素将占据页面的整个宽度。浮动它会将其宽度折叠为其内容，允许边线上升到您想要的位置
要获取包含元素的#main
，可以添加溢出：自动其目的是父元素不会扩展为包含浮动元素。溢出表示元素应展开以包含溢出的元素。您只需向左浮动#blogcontainer
。原因是，块元素将占据页面的整个宽度。浮动它会将其宽度折叠为其内容，允许边线上升到您想要的位置
要获取包含元素的#main
，可以添加溢出：自动其目的是父元素不会扩展为包含浮动元素。溢出表示元素应展开以包含溢出的元素。您只需向左浮动#blogcontainer
。原因是，块元素将占据页面的整个宽度。浮动它会将其宽度折叠为其内容，允许边线上升到您想要的位置
要获取包含元素的#main
，可以添加溢出：自动其目的是父元素不会扩展为包含浮动元素。溢出表示元素应展开以包含溢出的元素。尝试使用此更新的css。。在几个地方改变了风格
我在css中改变了什么
添加*，它是通用选择器，将所有元素的边距和填充重置为0
* {
margin: 0;
padding: 0;
}
添加框大小：边框框，因为在任何div或section中，所有边框都将占用exra像素。这将计算perticualar div宽度内的边框大小
header, footer, aside, nav, article {
display: block;
box-sizing: border-box;
}
并将溢出：auto
添加到
#main {
margin: 1%;
padding: 1%;
border: 5px solid black;
overflow: auto;
}
最后添加了float和display：内联块
#blogcontainer {
width: 60%;
margin: 1%;
padding: 1%;
border: 5px solid gold;
float: left;
display: inline-block;
}
/*临时CSS重置*/
* {
保证金：0；
填充：0；
}
/*告诉浏览器将HTML5元素呈现为块。根据需要添加更多标记*/
标题，
页脚，
在一边
导航，
文章{
显示：块；
框大小：边框框；
}
显示图像{
显示：块；
左边距：自动；
右边距：自动；
}
导航{
利润率：1%；
填充：1%；
边框：5px纯紫色；
}
李海军{
显示：内联；
}
#主要{
利润率：1%；
填充：1%；
边框：5px纯黑；
溢出：自动；
}
#博客容器{
宽度：60%；
利润率：1%；
填充：1%；
边框：5px纯金；
浮动：左；
显示：内联块；
}
#博客帖子{
利润率：1%；
填充：1%；
边框：5px纯绿色；
}
#评论{
利润率：1%；
填充：1%；
边框：5px纯灰；
}
#评论>文章{
利润率：1%；
填充：1%；
边框：5px纯红；
}
#评论形式{
利润率：1%；
填充：1%；
边框：5px纯黄色；
}
#右边{
浮动：对；
宽度：20%；
利润率：1%；
填充：1%；
边框：5px纯蓝色；
}
页面标题
推荐地点
-
尝试使用此更新的css。。在几个地方改变了风格
我在css中改变了什么
添加*，它是通用选择器，将所有元素的边距和填充重置为0
* {
margin: 0;
padding: 0;
}
添加框大小：边框框，因为在任何div或section中，所有边框都将占用exra像素。这将计算perticualar div宽度内的边框大小
header, footer, aside, nav, article {
display: block;
box-sizing: border-box;
}
并将溢出：auto
添加到
#main {
margin: 1%;
padding: 1%;
border: 5px solid black;
overflow: auto;
}
最后添加了float和display：内联块
#blogcontainer {
width: 60%;
margin: 1%;
padding: 1%;
border: 5px solid gold;
float: left;
display: inline-block;
}
/*临时CSS重置*/
* {
保证金：0；
填充：0；
}
/*告诉浏览器将HTML5元素呈现为块。根据需要添加更多标记*/
标题，
页脚，
在一边
导航，
文章{
显示：块；
框大小：边框框；
}
显示图像{
显示：块；
左边距：自动；
右边距：自动；
}
导航{
利润率：1%；
填充：1%；
边框：5px纯紫色；
}
李海军{
显示：内联；
}
#主要{
利润率：1%；
填充：1%；
边框：5px纯黑；
溢出：自动；
}
#博客容器{
宽度：60%；
利润率：1%；
填充：1%；