如何使用CSS将n列中间？

目前，我有我的4列下面的CSS这可能会增长到5或6的未来：如何使用CSS将n列中间？

<style> 
.columns { 
    margin: 0 auto; 
    border: 1px red dotted; 
    width: 90%; 
} 

.columns div { 
    float: left; 
    width: 20%; 
    overflow:hidden; 
    border: solid 1px; 
    margin-right: 1em; 
} 
</style> 

<div class="columns"> 
    <div> 
    <h3>First</h3> 
    <ul> 
     <li>left</li> 
    </ul> 
    </div> 
    <div> 
    <h3>Second</h3> 
    <ul> 
     <li>mid</li> 
    </ul> 
    </div> 
    <div> 
    <h3>Third</h3> 
    <ul> 
     <li>right</li> 
    </ul> 
    </div> 
    <div> 
    <h3>Fourth</h3> 
    <ul> 
     <li>far right</li> 
    </ul> 
    </div> 
</div>

是否可以使用我有什么中央在页面中间的所有4列？

来源

2009-06-30 Thierry Lam

我觉得在用硬编码的最小计算值读取所有可能的答案后，我得到了一些可行的东西。为简单起见，我已将边框取出：

.columns { 
    position: relative; 
    clear: both; 
    margin: 0 auto; 
    width: 900px; 
} 

.columns div { 
    position: relative; 
    float: left; 
    width: 22%; 
    overflow:hidden; 
    margin-right: 4%; 
} 

.columns div.last { 
    margin-right: 0; 
}

在最后一列使用<div class="last">。

来源

2009-06-30 18:32:15

你将不得不设置.columns静态宽度：

.columns { 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px red dotted; 
}

你可能希望把结算格在文档的底部（.columns后），以及：

<div style="clear: both;">&nbsp;</div>

只是为了扩展.columns容器（所以你的边框变成了列的长度）。

UPDATE

如果你想严格构成一个四列布局，然后更新.columns DIV这样：

.columns div { 
    width: 160px; 
    padding-left: 10px; 
    padding-right: 10px; 
    margin-left: 10px; 
    margin-right: 10px; 
}

这里唯一的真正秘诀是采取总宽度的容器并除以四。在我提供的情况下，800/4 = 200因此每列的总宽度（宽度+填充+边距）为200px;

来源

2009-06-30 17:36:26

不使用清理div。改用“min-height：10px”。 f IE6 – Jason 2009-06-30 17:38:10

嗯，技术上是的，但它需要你设置一个宽度，可能在你的包装div。我不知道是否有可能以动态中心（即20％宽度）浮动列为中心。如果你设置你的包装div宽度，那么你可以设置其他列的边距来居中它们

来源

2009-06-30 17:37:29 Jason

如何使用CSS将n列中间？

回答

相关问题