0

私は基本的な CSS スキルを持つディレクトリ サイトのウェブマスターであり、Joomla ベースで SobiPro を使用しています。ディレクトリ エントリには、上部に 2 つの画像 (外観と内部の写真) が表示されます。場合によっては、どちらか一方しか使用できない (場合によってはどちらも) こともあります。それで、行方不明の写真を提供できる人にメールで送ってもらうように求める行エントリがあります。最新のアップグレードまでは、これは問題ではありませんでしたが、現在は問題になっています。2 つの div を揃えることができません。ここで例を見ることができます！

現在の 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 は導入行 (「interior」または「exterior」テキストのいずれかを選択する選択リスト) であり、field_addy1 はボットで保護された電子メール アドレスです。フロートを試しましたが、テキストが写真で折り返されようとしました。イントロ テキストと「Directory Webmaster」の組み合わせを単一のハイパーリンクに使用して、単一の div にしようとしましたが、うまくいきませんでした。

フィールド幅はそれぞれ 150px と 200px で、タイトルの長さと URL の長さは最大 200px に設定されています。どんな提案でも大歓迎です。

4

1 に答える 1

0

ここでのマージン付きのポジショニングは少しおかしいです。何が起こっているのか完全にはわかりません。この問題を簡単に修正するには:

まず、仕切りから を削除margin-topし、メイン画像からプロパティを削除します。.field_photosfloat:left

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

.field_sobi2_icon {
    float:none;
}

次に、display並べて配置する 2 つのフィールドの を変更します。

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

.field_photos, newClass2 {
    display: inline;
}
于 2013-03-22T08:57:37.913 に答える