如何在 div 中创建 CSS 列？答案

【问题标题】：How to make CSS columns in a div?如何在 div 中创建 CSS 列？
【发布时间】：2011-04-11 22:26:40
【问题描述】：

我正在制作一个 Wordpress 模板的原型，并尝试在 header 上放置相同的元素，如下所示：http://dl.dropbox.com/u/768097/about.pdf

这里是 HTML 和 CSS 文件：http://acreedy.oliveandpickle.com/

我需要header 中的 4 列，所有内容都应该放在图片下方。

【问题讨论】：

这个链接已经失效了。您可以将文件上传到其他来源以供未来用户使用吗

标签： css wordpress wordpress-theming

【解决方案1】：

向左浮动肯定会解决您的问题，但请记住，每当您向浮动元素添加填充或边距时，您也必须调整宽度。我查看了您的页面，但您没有补偿该更改。相应地固定宽度，你应该很高兴：D

~克里斯

http://twitter.com/TheCSSGuru

【讨论】：

那么，在所有标题元素上向左浮动？
我只是重新排列你的 html 和 css 一点，太大而无法粘贴在这里，但我认为你应该做另一个答案。

【解决方案2】：

如果您使用的是 html5，那么您可以使用 side 或 section 元素代替 div。

<style>
    .column {
             float: left;
             width: 200px;}
</style>

<aside class="column">
  Column1
</aside>
<section class="column">
  Column2
</section>
<section class="column">
  Column3
</section>
<section class="column">
  Column4
</section>

【讨论】：

True 没错，使用一点 JavaScript 应该没问题，但可以让 IE 更上一层楼。

【解决方案3】：

HTML：

<div id="header">

  <h1>Alan Creedy</h1>

    <ul id="quickInfo">
      <li class="mission">Mission Statement</li>
        <li>Helping People Think for Themselves</li>
        <li>1.919.926.0688</li>
        <li><a href="#contact">Email Me</a></li>
    </ul>

    <ul id="menu">
        <li class="current"><a href="#home">Home</a></li>
        <li><a href="#About">About</a></li>
        <li><a href="#BestPracticeIdeas">Best Practice Ideas</a></li>
        <li><a href="#ManagementTools">Management Tools</a></li>
        <li><a href="#Preneed">Preneed</a></li>
        <li><a href="#CaseStudies">Case Studies</a></li>
        <li><a href="#RecommendedResources">Recommended Resources</a></li>
        <li><a href="#ThinkTankForum">Think Tank Forum</a></li>    
    </ul>

</div>

CSS：

#header {
  border-bottom:3px solid #1582AB;
  height:200px;
  margin:0 auto;
  padding:46px 0 0;
  width:1000px;
  position:relative;
}
#header h1 {
  background:url("images/alan_creedy_headshot_transparent.png") no-repeat left top;
  font-size:40px;
  height:140px;
  padding:8px 0 0 215px;
  margin:0;
}
#quickInfo {
  position:absolute;
  right:10px;
  top:10px;
  width:400px;
}
#quickInfo li {
  list-style-type:none;
}
.mission {
  font-size:18px;
}
#menu {
  margin:0 auto;
  padding:0;
  width:1000px;
}

【讨论】：