強制佈局中的一列優先

我有一個頁面佈局的部分，可以在右列的任意位置選擇1到3個按鈕，左列的標題可能是幾個字或甚至一段。強制佈局中的一列優先

右列有按鈕，必須優先並保持對齊到頁面寬度的右側。按鈕必須保持內聯而不包裝。您可以刪除一個或兩個按鈕，並強制文本向左，這是正確的。

左列需要在包裝文本的情況下儘可能靠近右列。

我打過使用CSS表格顯示的想法，它在長文本的情況下效果很好，但對於短文本，按鈕列離開右側。

嘗試刪除除3或4個文字以外的所有文字，並將按鈕對齊到左側。我在這裏採取了錯誤的做法嗎？

這裏是HTML，這裏是一個小提琴http://jsfiddle.net/MaureenDunlap/tvFbN/16/

<div id="wrapper"> 
<div id="container"> 
    <div id="header_wrapper"> 

     <div class="player_header_info">In vel purus ipsum. quam tempor auctor. Praesent ac leo magna, at condimentum felis. Nullam vel tortor semper metus bibendum iaculis. In consequat arcu aliquam nibh posuere non cursus eros dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla venenatis gravida mi eget vestibulum. 
      <div class="player_header_secondary">February 28, 2013</div> 

     </div> 
     <div id="buttons"> 
      <div class="button_container"> 
       <img src="http://www.likno.com/Images/lwbm/Single_Mesh_11.jpg" /> 
       <img src="http://www.likno.com/Images/lwbm/Single_Mesh_11.jpg" /> 
       <img src="http://www.likno.com/Images/lwbm/Single_Mesh_11.jpg" /> 
      </div> 
     </div> 
    </div> 
</div> 
<div id="normal"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet tortor at diam aliquet ornare eu nec leo. Phasellus ut blandit leo. Vivamus viverra velit eget quam tempor auctor. Praesent ac leo magna, at condimentum felis. Nullam vel tortor semper metus bibendum iaculis. In consequat arcu aliquam nibh posuere non cursus eros dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla venenatis gravida mi eget vestibulum. Phasellus elit ipsum, convallis a porttitor eu, blandit non justo. Pellentesque gravida, dui vel vulputate cursus, diam nisl eleifend massa, ullamcorper cursus nisl diam at erat. Nulla urna odio, vehicula et commodo sit amet, commodo at diam. Phasellus molestie tincidunt lacus, varius semper ligula tincidunt non. Nullam fermentum, enim ut dictum gravida, libero mauris pretium lacus, ac vehicula neque massa at mi.</p> 
    <p>Nam dignissim vehicula eros non viverra. Vestibulum non tellus sed ante placerat pharetra in vitae velit. Vestibulum eu lacinia urna. Nullam libero mauris, venenatis in condimentum auctor, porta tempor massa. In faucibus sapien sit amet tellus faucibus quis dictum eros pellentesque. Fusce id odio nec orci pellentesque bibendum. Curabitur viverra, nisl nec sodales elementum, lectus nisi vulputate leo, non cursus est libero eget odio. Curabitur a libero arcu. Etiam pellentesque mauris ut mi pellentesque euismod. Aenean sit amet consectetur diam. Curabitur nec velit leo. Sed feugiat lacinia sagittis.</p> 
    <p>Nam quis nulla quis lorem ornare semper nec eget orci. Proin justo lectus, suscipit rhoncus sollicitudin nec, dignissim eu mauris. Curabitur sit amet tortor in nisl vulputate placerat in nec lectus. Praesent euismod pellentesque augue, eu condimentum quam pellentesque et. Aliquam erat volutpat. Nam vitae leo et augue placerat lobortis et id magna. Curabitur sit amet ante id felis luctus iaculis. Quisque ac orci eu purus tempor consectetur vitae et dui. Mauris vehicula tincidunt ligula a cursus. Nunc imperdiet semper pulvinar. Phasellus iaculis laoreet quam, ac adipiscing mi pellentesque eu.</p> 
    <p>Nulla adipiscing fermentum leo, eget convallis nulla facilisis vel. Phasellus mollis ultrices risus vel volutpat. Nullam in enim mi. Duis eget ligula lectus, eget feugiat mauris. Duis at tortor enim, sit amet euismod turpis. Cras mattis tincidunt dolor nec feugiat. Mauris hendrerit lacus eu augue ultrices eu porttitor tellus semper. Ut mattis augue vitae velit tincidunt tristique.</p> 
</div>

這裏是我的CSS：

#header_wrapper { 
display: table; 
border-collapse: collapse; 
width:100%; 
border:1px dotted #ccc; 
} 

.player_header_info { 
display: table-cell; 
vertical-align:top; 
background-color: #e7dbcd; 
padding-left:5px; 
} 

#buttons { 
display: table-cell; 
padding-left: 10px; 
vertical-align:top; 
} 
.button_container { 
position:relative; 
display:inline; 
white-space:nowrap; 
}

來源

2013-03-20 Maureen Dunlap