如何在一行上对齐文本和图像并将它们放在左侧和/或右侧？

Question

我有以下的CSS和HTML代码：

div.container { height: 40px; } 
div.container .title {} 
div.container .link_buttons {} 


<div> 
    <div class="container"> 
    <div class="title"> 
     <img width="16" height="16" src="/favicon.ico" alt="Text"> 

     <a href="http://www.test.com">Test website</a> 
    </div> 

    <div class="link_buttons"> 
     <a target="_blank" href="http://www.test.com"> 
     <img src="transparent.gif" class="background_image" alt="Text"> 
     </a> 
    </div> 
    </div> 

    <!-- The same structure as the above but with different data. --> 
    <div class="container">...</div> 
    <div class="container">...</div> 
</div> 

我想在同一行排列存在于每个div.container和各div.container里面所有的内容，使div.title内容被定位在左侧和div.link_buttons内容将被定位在右侧。做这个，我想垂直对齐div.title和div.link_buttons在中间的div.container。

如何以正确的方式设计CSS样式？或者，我是否需要重新思考并更改整个HTML代码以简化事情？如果是这样，我可以做出什么来获得相同的结果？

---

注：我试图用浮动，但我有麻烦主要是因为那时我不能垂直对齐div.container内div.title和div.link_buttons（你可以在上面的代码中看到，它有height: 40px;）。

Answer 1

在这里你去：

div.container { height: 40px; line-height:40px;} 
div.container .title {float:left;} 
div.container .link_buttons {float:right} 

http://jsfiddle.net/WH4eK/

Answer 2

.title { float: left } /* Float them */ 
.link_buttons { float: right } 
.container:after { /* And clear the float */ 
    content: ''; 
    display: table; 
    clear: both; 
}