html - div 没有正确浮动

Question

所以我有三个div。我希望它们像这样浮动：1st /2nd /3rd 所以都在同一行。使用我的代码它不起作用。你能帮助我吗？

这是我的代码：html：

 <div id="holder"><h5>something</h5></div>
 <div id="visual_holder">something2</div>
 <div id="invest"><h2>something3</h2></div>

 css:
 #holder{
         width:200px;
          padding-right:48px;
          padding-left:32px;
         padding-top:32px;
        display:inline-block;
           }

    #visual_holder{
    font-family: "Times New Roman";
    font-size:7.5em;
    text-transform:uppercase;
    line-height:60%;
     float:right;
    padding-top:32px;
     }

    #invest{float:right;}

感谢您的帮助！

Answer 1

只需交换您的 div 的位置，如下所示

 <div id="holder"><h5>something</h5></div>   
 <div id="invest"><h2>something3</h2></div>      
 <div id="visual_holder">something2</div>      

Answer 2

他们不应该都向左浮动吗？

请参阅此处的示例并根据需要进行更新：http: //jsfiddle.net/tRNpQ/

#holder{
         width:200px;
          padding-right:48px;
          padding-left:32px;
         padding-top:32px;
       float:left;
           }

    #visual_holder{
    font-family: "Times New Roman";
    font-size:1.5em;
    text-transform:uppercase;
    line-height:60%;
     float:left;
    padding-top:32px;
     }

    #invest{float:left;}

Answer 3

尝试只交换visual_holder和investdiv：

<div id="holder"><h5>something</h5></div>
<div id="invest"><h2>something3</h2></div>
<div id="visual_holder">something2</div>

看来你必须先放最右边的div。参见此处：CSS 浮动多个左浮动元素和一个右浮动元素