左右浮动在同一行

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:left 您的 .fileLabel。

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

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

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

Answer 2

好吧，如果您向我们提供 fiddle 以更好地理解您实际从代码中得到什么以及您期望从中得到什么，那就更好了。

我认为图片没有出现在同一行的原因可能有两个：

图片太大不适合页面大小，被迫移到第二行。如果是这种情况，那么显然您必须减小图像的大小。
可能存在编码问题，为此我认为您应该使用

position: absolute

首先在所需图像中添加以下代码行，然后属性首先检查其是否有效。
另外，我想告诉你我通常是如何解决这类问题的。选择 div 标签的一些背景颜色 background: red 以查看这些 div 标签在页面上的位置和占用的空间，然后进一步移动。

Answer 3

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

display: inline

在文件标签上 class

Answer 4

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

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

左右浮动在同一行

Float right and left are on the same line

css

twig