左右浮动在同一行上

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

假设一行上有空间，你只需要对元素重新排序，以便浮点数出现在非浮点元素之前：

<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/

Answer 2

看来你忘了float:left你的.fileLabel.

请记住在浮动元素之后使用clear:both。

<span style='clear:both'></span>

只需在所有浮动元素之后将其添加到父div 中即可。

Answer 3

好吧

，如果您为我们提供一个小提琴，以更好地理解您实际上从代码中得到了什么以及您对它的期望，那就更好了。

我相信图像不在同一行上可能有两个原因是：

1. 图像太大，无法适应页面的大小，因此它们被迫在第二行上移动。如果是这种情况，那么，显然您必须减小图像的大小。

2. 可能存在编码问题，为此我认为您应该使用

   position: absolute

   以下代码行首先在所需的图像和属性中，然后检查其是否有效。

3. 另外，我想告诉你我通常做什么来解决这类问题。选择div标签的一些背景颜色background: red以查看这些div在页面上占用的位置和空间量，然后进一步移动。

Answer 4

事实上，我意识到唯一要做的就是添加：

display: inline

在文件标签分类上