1

我发现一些代码可以创建完美的带有页眉和页脚的两列布局。无论内容如何,​​这两列都完美地向右延伸,这正是我所寻找的。

问题:我找不到在两列之间创建空间的方法。我需要空间,因为我正在使用边框,而且看起来很拥挤。列不浮动,边距也不起作用。

有人能想出一种在不破坏功能的情况下将两者分开的方法吗?

这是 jsfiddle 链接:http: //jsfiddle.net/7M9rg/3/

非常感谢!

这是代码:

<div id="wrapper">
<div id="header">
</div>

<div id="main">

<div id="side">
<div id="side-stuff">
<ul>
<li><a href="../English/index.html">Home</a></li>
</ul>
</div>
</div>

<div id="content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has</p>
</div>
</div>

<div id="footer">&copy; 2013 </div>
</div>

CSS:

/*css reset*/
html,body {position:relative;margin:0;padding:0;min-height:100%;width:100%;
height:100%;}
div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,
textarea,p,blockquote,th,td, figure {margin:0;padding:0;}
ol,ul {list-style:none;}
li {list-style-type: none;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:
border-box; }


html, body {
font-family: Helvetica;
height: 100%; /*important for equal height columns*/
min-width: 650px;
}

#wrapper{
height: 100%; /*important for equal height columns*/
padding-bottom:130px; /*This must equal the height of your header*/}

#header{
height: 130px; /*This must equal padding bottom of wrap*/
display:block;
padding: 5px;
color: #fff;
border: thin solid #ebebeb;
border-radius: 10px;
margin: 10px;
background-image: url(Images/gradient.png);
background-repeat: repeat-x;    
width: 99%;}

#main {
position: relative;
height: 100%; /*important for equal height columns*/
width: 99%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 50px; /*This needs to match footer height*/
overflow: auto;
margin-left: 10px;}

#side{
background-color: #fff;
width: 150px;
margin: 10px;
vertical-align: top;
padding-top: 20px;
padding-right: 10px;
display: table-cell;
border-radius: 10px;
border: thin solid #CCC;}

#side-stuff{
display: block;
padding-left: 10px;}

#content{
background-color: #fff;
padding: 10px;
display: table-cell; /*To make sibling columns equal in height*/
margin-bottom:10px;
border-radius: 10px;
border: thin solid #CCC;}

#content-stuff{
width: auto;
height: auto;}

#footer{
position: relative;
height: 40px;
margin-top: -40px; /* margin-top is negative value of height */
margin-left: 10px;
clear: both; /* Use if floating elements */
color: #999;
width: 99%;
border: thin solid #ebebeb;
border-radius: 10px;
background-image: url(Images/footer_gradient.png);
background-repeat: repeat-x;
background-position: bottom;}
4

2 回答 2

1

因为您正在使用display: table-cell,所以边距不起作用。

这是一种解决方法。#side如下创建一个分隔符,并在and之间插入#content

<hr class="spacer"> 

将新元素设置为:

hr.spacer {
    display: table-cell;
    border: 1px;
    width: 10px;
}

将宽度设置为合适的值。

小提琴:http: //jsfiddle.net/audetwebdesign/navc5/

这引入了一个额外的元素,但它易于实现且可靠。

请注意,table-cellIE7 及更早版本不支持此功能。对于某些人来说,这是一个问题。

于 2013-04-12T19:31:13.770 回答
0

因为您的元素现在实际上是一个表格,所以您可以使用适用于表格的所有属性。该border-spacing属性是您正在寻找的,它适用于表格元素。

http://jsfiddle.net/7M9rg/6/

#main {
    border-spacing: 10px;
}

您需要对周围元素的边缘进行一些修补,以使您的#main元素回到应有的位置。

于 2013-04-12T19:38:10.443 回答