多个元素并排一行，div+css布局乱码，如何进行处理

想要实现上述效果，可以有很多种方法，比如:

1>  pic左浮动，右边word统一命名并且右浮动，word需要加一个border-bottom样式，小梦梦word_name、word_num分别用span实现，但此时问题出现了。
word_num的宽度无法固定，会随着数字的个数而变化。原因如下：
span属于行内元素，行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，可以通过maigin-left、margin-right来进行左右的间距。其宽度是随元素的内容而变化的，设置宽度、高度无效，行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-right、margin-left     、margin-right都可以产生边距效果，但数值方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
2>  word中，小梦梦word_name、word_num分别都用div，一个左浮动、一个右浮动，但往往会乱码，因为重叠的左右浮动。
鉴于以上两种方法的问题，最后采用另一种方法，即可以保证效果的实现，也会更加的清晰。

代码如下：

<div id="word" style="float:right">
     <div id="word_num" style="float:right"></div>
     <div id="word_name">小梦梦</div>
</div>
  
<div id="pic">
</div>