Question

我是具有基本CSS技能的目录网站的网站管理员，在Joomla基础上使用SobiPro。目录条目在顶部显示2个图像 - 外部和内部照片。有时，只有1个或其他（有时两者都没有）;所以，我有一个行条目，要求任何人可以提供丢失的图片给他/我们发送电子邮件。直到我们最新的升级，这不是问题，但现在是。不能让两个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，使用介绍文本和“目录网站管理员”组合成一个超链接，但是没有飞过。

字段宽度分别为150px和200px，标题长度和URL长度设置为最大200px。任何建议都会非常感激。

Answer 1

你在这里有利润的定位有点疯狂。我不完全确定那是怎么回事。要快速解决此问题：

首先，从margin-top分隔符中移除.field_photos，然后从主图片中移除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;
}

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

1 个答案: