2 个 CSS 文本 - 1 个电子邮件地址 - 我如何将它们并排对齐？

Question

我是具有基本 CSS 技能的目录网站的网站管理员，在 Joomla 基础上使用 SobiPro。目录条目在顶部显示 2 张图像 - 一张外部照片和一张内部照片。有时，只有一个或另一个（有时两者都没有）可用；所以，我有一个行条目，要求任何可以提供丢失图片的人通过电子邮件将其/他们发送给我。在我们最新的升级之前，这不是问题，但现在是。无法使两个 div 对齐。可以看一个例子here！

这是 CSS 模板当前的样子：

div.field_photos
{
    border-style: none;
    font-weight: bold;  
    font-size: 12px;
    color: #000000;
    padding-left: 5px;
    margin-top: 360px;  
    margin-left: 5px;
}
div.field_addy1
{
    border-style: none;
    font-color: #000000;
    font-weight: bold;
    font-size: 12px;  
    margin-top: 0px; /* position it horizontally */
    margin-left: 5px;
    margin-right: 5px;  
}

其中 field_photos 是介绍行（选择列表选择“内部”或“外部”文本），field_addy1 是受机器人保护的电子邮件地址。我试过花车，但文字试图在图片上换行。尝试将其制作为单个 div，使用介绍文本和“目录网站管理员”组合到单个超链接中，但这并没有成功。

字段宽度分别为 150 像素和 200 像素，标题长度和 URL 长度设置为最大 200 像素。任何建议将不胜感激。

Answer 1

您在此处的边距定位有点疯狂。我不完全确定这是怎么回事。要快速解决此问题：

首先，从.field_photos 分隔符中删除margin-top，并从主图像中删除float:left 属性：

<img class="spFieldsData field_sobi2_icon" src="..." alt="">

.field_sobi2_icon {
    float:none;
}

然后更改您想要并排对齐的两个字段的display：

<div class="field_photos">...</div>
<div class="spField newClass2">...</div>

.field_photos, newClass2 {
    display: inline;
}