css - 左右浮动在同一行

Question

第一张图片和文件标签在同一行，但最后一张图片在第二行。

我希望这三个元素在同一行。

这是我的代码:

HTML:

<div>
      <img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}"  
                         title="{% trans %}dialog.pdf.file{% endtrans %}"
                         class="smallImagesFloatLeft"
                         />
      <div class="fileLabel">{% trans %}file.note.service.2584{% endtrans %}</div>
      <img src="{{asset('bundles/cramifaccueil/images/download.png')}}" 
                        title="{% trans %}download{% endtrans %}"
                        class="smallImagesFloatRight"
                        />
</div>
<div>
      <img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}" 
                        title="{% trans %}dialog.pdf.file{% endtrans %}"
                        class="smallImagesFloatLeft"
                        />
      <div class="fileLabel">{% trans %}file.mode.operatoire{% endtrans %}</div>
      <img src="{{asset('bundles/cramifaccueil/images/download.png')}}" 
                        title="{% trans %}download{% endtrans %}"
                        class="smallImagesFloatRight"
                        />
</div>

CSS:

.smallImagesFloatLeft {
  float:left;
  margin-right:5px;
  cursor: default;
}

.smallImagesFloatRight{
  float:right;
}

.fileLabel {
 max-width: 75%;
}

Answer 1

假设一行中有空间，您只需重新排列元素，使 float 元素位于非 float 元素之前:

<div>
      <img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')}}"  
                         title="{% trans %}dialog.pdf.file{% endtrans %}"
                         class="smallImagesFloatLeft"
                         />
     <img src="{{asset('bundles/cramifaccueil/images/download.png')}}" 
                        title="{% trans %}download{% endtrans %}"
                        class="smallImagesFloatRight"
                        />
     <div class="fileLabel">{% trans %}file.note.service.2584{% endtrans %}</div>
</div>

http://jsfiddle.net/o0ksu724/