如何在div中製作CSS列？

Question

我原型設計的WordPress模板，我想放在header這樣相同的元素：http://dl.dropbox.com/u/768097/about.pdf

這裏是HTML和CSS文件：http://acreedy.oliveandpickle.com/

我需要4列在header和一切都應放在圖像下。

Answer 1

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; 
} 

Answer 2

向左浮動將最肯定地解決您的問題，但請記住，每當向浮動元素添加填充或邊距時，您也必須調整寬度。我檢查了你的網頁，你沒有補償這一變化。因此固定寬度，你應該是好去：d

〜克里斯

http://twitter.com/TheCSSGuru

Answer 3

如果您使用HTML5，那麼你可以使用撤銷或部分元素，而不是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>