6

私はこのhtmlを持っています:

<div class="speaker-list">
    <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first">   
            <div class="views-field views-field-title">
                <span class="field-content">
                    <a href="/speaker/keith-anderson">Keith Anderson</a>
                </span>
            </div>  
            <div class="views-field views-field-field-job-title">
                <div class="field-content">VP, Digital Advisory</div>
            </div>  
            <div class="views-field views-field-field-company">
                <div class="field-content">RetailNet Group</div>
            </div>  
            <div class="views-field views-field-title-1">
                <span class="field-content">
                    <a href="/session/store">Store of the Future</a>
                </span>
            </div>  
            <div class="views-field views-field-field-headshot">
                <div class="field-content">
                    <div id="file-53" class="file file-image file-image-jpeg contextual-links-region"> 
                        <div class="content">
                            <img typeof="foaf:Image" src="/kanderson.jpg" width="180" height="180" alt="" />
                        </div>
                    </div>
                </div>
             </div>
        </div>
    </div>
</div>

Drupalビューによって動的に生成されるため、出力htmlをまったく変更できません。ここにあるもので作業する必要があります。望ましい結果は次のとおりです。

ここに画像の説明を入力

ヘッドショットにスタイルを設定しないと、次のようになります。 ここに画像の説明を入力

画像のスタイルを設定して、テキストの左側に浮かせるようにしました。

.view-speaker-list div.view-content div.views-row div.views-field
div.field-content div.file-image div.content img {
    border: 1px solid #666;
    float: left;
    position: relative; /* tried with and without position (inc. absolute) */
    left: 30px;
}

これは私が得るものであるため、明らかに私は何か間違ったことをしています(相対的な位置で): ここに画像の説明を入力

そして絶対位置で： ここに画像の説明を入力

また、画像を保持する「最上位」の div クラスに float を配置しようとしましたが、div に位置はありません。

.view-speaker-list div.view-content div.views-row
div.views-field-field-headshot {
    float: left;
}

position: relative screenshot と同じ結果が得られます。

どこが間違っていますか？html を制御できる場合は、別の方法で行いますが、これらのネストされた div をすべて処理する方法がわかりません。

@WEX の新しいスクリーンショットを追加するために編集

HTMLを並べ替えてコードを使用しようとすると、次のようになります- http://jsfiddle.net/mPa7z/

ここに画像の説明を入力

4

4 に答える 4

5

floatあなたの方法がうまくいかなかった理由を理解できるように、「正しい」使用方法を説明しようと思います。

投稿ではfloat: left、<div>周囲の画像に適用しようとしていますが、そのテクニックは、フローティングしている要素が、周囲を包み込みたいすべての要素の上にある場合にのみ機能します. それはあなたの問題を「解決するかもしれません」が、それを使用して2つの異なる列を作成しようとすると、そのテクニックには落とし穴があります-右側のテキストがフローティング要素よりも高い場合、右側のテキストはその下に折り返されます. したがって、非浮動要素の周りに別のコンテナーを追加して、ラップしないようにする必要があります。これで問題は解決しますが、マークアップを編集することさえできない場合は、実際には役に立ちません!

以下に投稿した手法の方がうまく機能し、問題を解決できると私は主張します: http://jsfiddle.net/Wexcode/AQQwX/

.view-content { 
    position: relative;
    min-height: 180px;
    padding: 0 0 0 180px; }
.views-row { padding: 20px 0 0 20px; }
.views-field-field-headshot {
    position: absolute;
    top: 0;
    left: 0; }​
于 2012-06-07T22:13:50.543 に答える
1

Drupal でビュー自体にアクセスできる場合は、要素を並べ替えることができます。Drupal にログインしたら、ビューを開き (Drupal 7 の場合: [構造] > [ビュー] > [ビュー名])、[フィールド] を探し、[追加] の横にある三角形をクリックします。ポップアップが表示されます。[再配置] をクリックします。次に、写真フィールドをドラッグしてビューの最初の項目にし、CSS を調整して画像を左にフロートさせます。

于 2012-06-08T12:33:36.943 に答える
0

エミー、

ヘッドショットを にしようとする代わりにfloat:left、他の を作成することを検討しましたfloat:rightか? これにより、マークアップを変更しなくても、画像が左に浮いているような印象を与えることができます。

div.speaker-list div.views-row > div.views-field {
    float:right;
    clear:both;
}
div.speaker-list div.views-row > div.views-field.views-field-field-headshot {
    float:none;
    clear:none;
}

上記の CSS は、Drupal で生成された他のマークアップを変更することなく、その特定の構成で動作するはずです。他の CSS が干渉しないようにするために、可能な限り多くの仕様を適用しました。ヘッドショットは含まれている に戻るため<div>、ストアが大きすぎる場合を除き、サイズを変更する必要はありません (データを見ないとわかりません)。最後に、CSS は簡潔であるため、要素ごとに必要なスタイルを追加できます。

お役に立てれば、

ファジカルロジック

于 2012-06-08T12:27:52.393 に答える
-1

ページの別の場所にコードをドロップできれば、jQuery を使用して HTML を制御できます。次に、DOM ツリーに変更を加えることができます。

しかし、HTML を編集できない理由がわかりません。Drupal はオープン ソースではありませんか? FTP を使用してファイルを検索し、操作できるはずです。

于 2012-06-07T22:11:07.550 に答える