我有一个页面布局的一部分，它可以在右列中选择 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;
}