div垂直和horizontale

是possble做，在HTML/CSS：desired result div垂直和horizontale

有我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
     <style>  body {  font-family: 'Lucida Grande', Verdana, Arial, sans-serif;  }  
     .box { 
     border: 3px solid black; 
     background-color:pink; 
     width:auto; 
     display: table; 
     white-space: nowrap;}    

    .com { 
    background-color:yellow;  
    border: 3px solid black;        
    -moz-transform: rotate(90deg) translateY(-40px) ; 
    -o-transform: rotate(90deg) translateY(-40px) ; 
    -webkit-transform: rotate(90deg) translateY(-40px) ; 
    transform: rotate(90deg) translateY(-40px) ; 

    -moz-transform-origin: 0% 0% ; 
    -o-transform-origin: 0% 0% ; 
    -webkit-transform-origin: 0% 0% ; 
    transform-origin: 0% 0% ; 
    display: table; 
    white-space: nowrap; 
    } 

</style> 

    <title>css</title> 
    </head> 
    <body > 

    <div> 

    <div style="float:left; border: 1px solid black; "> 
    <div class=box>DIV-111111</div> 
    <div class=com>DIV-2222222222</div> 
    </div> 

    <div style="float:left; border: 1px solid black; "> 
    <div class=box>DIV-33</div> 
    <div class=com>DIV-44444444</div> 
    </div> 

    <div style="float:left; border: 1px solid black; "> 
    <div class=box>DIV-55555555555555555</div> 
    <div class=com>DIV-6666666666666666666666</div> 
    </div> 

    </div> 

    </body> 
</html>`

但是，结果并不好..之间有一个空格由于黄色div，粉红色的div。

来源

2011-04-05 cedric.salaun