垂直定心3周的div在另一個DIV

Question

我有在容器3周的div：

<div id="container"> 
    <h2>Heading</h2> 

    <div id="left"> 
    An image goes here. 
    </div> 

    <div id="center"> 
    Lorem ipsum whatever. 
    </div> 

    <div id="right"> 
    <ul> 
     <li>Example</li> 
     <li>Example</li> 
     <li>Example</li> 
    </ul> 
    </div> 
</div> 

我想有彼此相鄰和對齊 垂直的三個內的div。使用float: left和float: right代替left和 right div需要改變div的順序並且在center的末端有 ，這對我來說是不可能的。

我怎樣才能實現與CSS以下和這個div結構：

Answer 1

在CSS中使用display:inline-block垂直對齊，

這裏演示：http://jsfiddle.net/muthkum/BEHdu/1/

#left, #center, #right{ 
    display:inline-block; 
    *display:inline; /*IE7 fix*/ 
    zoom:1; 
    padding:5px; 
    border: 1px solid #000; 
    vertical-align:middle; 
} 
#left{ 
    width:50px; /*Remove or Increase the width if needed*/ 
} 

#center{ 
    /*SET WIDTH HERE*/ 
} 

#left{ 
    /*SET WIDTH HERE*/ 
}