css - 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 是受 bot 保护的电子邮件地址。我试过花车，但文字试图包裹在图片上。试图将它变成一个单独的 div，使用介绍文本和“目录网站管理员”组合成一个单一的超链接，但没有成功。

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

Answer 1

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

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

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

.field_sobi2_icon {
    float:none;
}

然后更改您希望彼此对齐的两个字段的显示:

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

.field_photos, newClass2 {
    display: inline;
}