垂直定心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*/ 
}