2 CSS文本 - 1電子郵件addy - 我如何並排排列它們？

我是具有基本CSS技能的目錄網站的站長，在Joomla基礎上使用SobiPro。目錄條目在頂部顯示2個圖像 - 外部和內部照片。有時，只有一個或另一個（有時既不可用）;所以，我有一個條目，要求任何能夠提供缺失照片的人通過電子郵件發送給我。在我們最新的升級之前，這不是問題，但現在是。無法獲得兩個div對齊。你可以看到一個例子here！2 CSS文本 - 1電子郵件addy - 我如何並排排列它們？

這就是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。任何建議將不勝感激。

來源

2013-03-22 Neil Foley

你在這裏的利潤定位有點瘋狂。我不完全確定這是怎麼回事。要解決這個問題的快捷方式：

首先，從.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; 
}

來源

2013-03-22 08:57:37

沒有的640x360像素的邊距，使下面的300像素HGT照片文本，該文本上升到頁面的頂部，並換到照片的正確的 - 因爲你在現在找見。 – 2013-03-22 09:59:30

這就是爲什麼你需要從圖像中刪除'float：left'（正如我的答案中所提到的）。 – 2013-03-22 10:00:34

做到了 - 將其更改爲float：none; – 2013-03-22 10:17:58

2 CSS文本 - 1電子郵件addy - 我如何並排排列它們？

回答

相關問題