Question

我正在尝试学习和使用html5并且具有基本布局但是侧边栏（旁边）和部分（内容）元素的长度不相等，我希望它们相等。我一直试图用假柱法解决这个问题，但还没有成功。我有几次尝试和我最后一次尝试到目前为止我在'mid-section'div中使用了背景图像，但这并没有显示！

我在这里展示了html5和css代码，感谢您提供一些建议，并帮助我了解如何使列长度相等。

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type ="text/css" href="stylev1.css" media="screen" >

<title>RPD simple html5 example
</title>
<!--[if IE]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]--> 

</head>
<body>
<div id="page">
<header>
<h1>Header content area</h1>
</header>

<nav>
<p>Nav content area for links-horizontal or vertical</p>
</nav>
<div class="mid-section">

<article>
<section>
 <p>&lt;article&gt; - Defines an article</p>
</section>
<section>
ARTICLE content
 Lorem ipsum.......................
.....................................
.....................................
</section>

<section>
Article Content 2
 Lorem ipsum.......................
.....................................
.....................................
</section>
</article>


<aside>
 <p>&lt;aside&gt;  - Defines an aside</p>

ASIDE Content (sidebar)

</aside>

</div>
<footer>
Page footer content area
</footer>
</div>
</body>
</html>



    /*CSS reset-basic! */

html  {
margin:0; padding:0;
}

#page{
 width:960px;
 margin:0 auto;
 text-align:left;
}

body {
 background-color:#5B5C58;
 color: #000000;
 font-family:Calibri, Verdana, Arial, sans-serif;
 font-size: 14px;
 text-align:center;
 margin:0;
}

header, footer, nav, article, section, aside {
 display:inline-block;
}

header {
 width:100%;
 margin-bottom:10px;
 background-color:green;
 width;50px;
}

nav {
 width:100%;
 background-color:#F0F8FF;
 float:left;
}

nav ul{
 width:100%;
 list-style:none;
 margin:0;
 padding:0;
}

nav ul li{
 display:inline;
 padding:3px 7px;
}

nav span{
 float:right;
 display:inline-block;
}

.mid-section {
color:red;
background: url(images/rpdsimplehtml5fauxcols6.png) repeat-y;
}


aside {
 width:30%;
background-color:#B0E2FF;
 margin:4px 2px;
 padding:10px;
 float:right;
 margin-top:10px;
 margin-bottom:10px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
}

article {
 width:65%;
 background-color:#B0E2FF;
 margin:4px 2px;
 padding:10px;
 float:left;
 margin-top:10px;
 margin-bottom:10px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
}

section {
 display:block;
 background-color:#E0FFFF;
 font-family:Cambria, Verdana, Arial, sans-serif;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 margin:4px 2px;
 padding:10px;
 }

footer {
 width:100%;
 background-color:#82CFFD;
 margin-top:10px;
 height:50px;
 clear:both;
}

我非常感谢有用的回复，谢谢

Answer 1

我觉得CSS并没有为我们提供与你类似的整类问题的合适解决方案。将简单的布局放在一起不应该转变为智慧和猜谜游戏。

因此，针对许多CSS纯粹主义者的抗议，我使用并推荐用于布局的表格。不加区分，但是当CSS无法交付时。

用表格完成，你的问题突然变得微不足道。

修改

完成。 pastebin中的“修正”代码。

看起来有点花哨但可以调整一下，看看你想要的方式，我敢肯定。

Answer 2

这是保持三列高度相同的最佳方法，到目前为止我已经看过了。遗憾的是，它需要HTML中的额外标记。此外，它不是特定于HTML5，但更改标签不是问题。

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 3

如果你的目标是“HTML5”和“CSS3”，你可以使用display: table-*

nav, article, aside {
  display: table-cell;
}

Answer 4

我无法弄明白这一点！我看到很多关于互联网搜索的css / jscript / jquery修复我的大脑正在超载！我不太喜欢表格代码，所以我现在就离开了这个方法！我所做的就是添加一个'mid-section'div（div mainarticle）和一个背景图片（是'faux col'方法？）。无论如何，我现在有一个简单的html5布局页面（几乎让我疯狂得到 - 我不擅长css编码!!）。这是我目前的代码：

``<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type ="text/css" href="rpdnewstyle.css" media="screen" >

<title>RPD simple html5 example
</title>
<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->    

</head>
<body>
<div id="wrap">
<div id="page">

<header>
<h1>Header content area</h1>
</header>

<nav>
<p>Nav content area for links-horizontal or vertical</p>
</nav>
<div id="mainarticle">

<article>
<section>
 <p>&lt;article&gt; - Defines an article</p>
</section>
<section>
ARTICLE content
 Lorem ipsum.......................
.....................................
.....................................
</section>

<section>
Article Content 2
 Lorem ipsum.......................
.....................................
.....................................
Nulla euismod commodo libero sit amet viverra. 
Fusce mauris elit, gravida sit amet luctus eu, sodales sit amet ipsum. 
Donec tincidunt tincidunt quam, vel faucibus magna tristique et. 
Duis quis enim arcu. Nam varius luctus tempus. Suspendisse potenti. 
Duis iaculis eleifend diam. Etiam volutpat tincidunt dolor, 
id dignissim risus pellentesque in. Nam ullamcorper felis 
sed nisl luctus tincidunt. In metus tellus, pretium in fermentum nec, 
posuere vitae turpis. Nulla facilisi. Aenean id purus eros, sed dignissim massa. 
Sed condimentum mollis nunc nec aliquet. Pellentesque porta arcu vel massa rutrum 
pellentesque. Aliquam consectetur volutpat sodales. Vivamus porttitor pellentesque elit, 
nec vestibulum lacus vestibulum laoreet. Aliquam erat volutpat. 
Cras molestie tellus non dolor volutpat fringilla. Morbi ut justo justo, 
eu euismod sapien. Curabitur iaculis metus in ligula ultrices volutpat. 
</section>
</article>

<aside>
 <p>&lt;aside&gt;  - Defines an aside</p>

ASIDE Content (sidebar)

</aside>
</div>
</div>
<footer>
Page footer content area
</footer>
</div>
</div>
</body>
</html>

和css：

    /* CSS Document */
html  {
 margin:0; padding:0;
}
body { 
margin:0; 
padding:0; 
line-height: 1.5em; 
font-family:Geneva, Arial, Helvetica, sans-serif; 
}

#wrap {
 width:900px;
 margin:0px auto; 
 }

header { 
border:1px solid #000; 
height:135px; 
background:#DEDEDE; 
margin-bottom:0px; 
width:100%;
}

h1 { margin-top:45px; 
}

#mainarticle { 
border:1px solid #000; border-top:none; 
background:#fff; 
width:900px;
background: url(images/faux-2-2-col.gif);
margin-bottom: 0px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
}

#page{
 width:900px;
 margin:0; auto;
 text-align:center;
}

header, footer, nav, article, section, aside {
    display:inline-block;
}

nav {
    width:100%;
    background-color:#F0F8FF;
    float:left;
     border:1px solid #000;
}

nav ul{
 width:100%;
 list-style:none;
 margin:0;
 padding:0;
}

nav ul li{
 display:inline;
 padding:3px 7px;
}

nav span{
 float:right;
 display:inline-block;
}

aside {
    width:20%;
    display: table-cell;
    display:block;
    margin:4px 2px;
    padding:10px;
    float:right;
    margin-top:10px;
    margin-bottom:10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

article {
    display: table-cell;
    width:70%;
    background-color:#B0E2FF;
    margin:4px 2px;
    padding:10px;
    float:left;
    margin-top:10px;
    margin-bottom:10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

section {
    display:block;
    background-color:#E0FFFF;
    font-family:Cambria, Verdana, Arial, sans-serif;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    margin:4px 2px;
    padding:10px;
    }

footer { width:100%;
    background-color:#000;
    margin-top:0px;
    height:50px;
    clear:both; 
  color:#fff; 
   border:1px solid #000;
  }

多么出色！ css和html5的乐趣.. 令人难以置信的是，我现在要根据这个模板编写一个html5 Wordpress主题...我想我会发疯!! :-)感谢所有帮助＆amp;最好的祝福！

简单的html5布局的平等色调cols需要帮助

4 个答案: