Question

        <span><img src="1.png" style="padding-left:10px;float:left;"> 
<img src="2.png" style="margin-left:10px;float:left;"></span>

这使两张图片彼此相邻，我想在中间插入一个“into ...”的文字。如果我尝试添加文本，它将为图像开始一个新行。

Answer 1

您可以将两者设置为＆＃39; display：inline-block＆＃39;而不是＆＃39; float：left＆＃39;

"<span><img src="1.png" style="padding-left:10px;display:inline-block;"> into...
<img src="2.png" style="margin-left:10px;display:inline-block;"></span>"

但请注意垂直对齐，因为您可能需要设置＆lt; vertical-align：middle＆＃39;甚至是＆＃39; vertical-align：top＆＃39;在图像和包装上，在这种情况下，＆＃39; span＆＃39;标签

Answer 2

您可以轻松地执行此操作：

<span>
<img src="1.png" style="padding-left:10px;float:left;"> 
<i style="float:left; padding-left:10px;"> into... </i>
<img src="2.png" style="margin-left:10px;float:left;">

此处正在运作example JSFiddle

Answer 3

为每个代码尝试style="float:left"。它会让它们粘在左侧。如果你希望它们之间有空格，请设置边距

（如果你不明白我在说什么，你应该google css教程。它会帮助你设计你的网站风格

css：如何将两个图像并排放在两个图像之间？

3 个答案: