2

私はいくつかのCSSで立ち往生しています。私はこれを必要とする：

ここに画像の説明を入力

しかし、私はこれを持っています(float:left画像に適用):

ここに画像の説明を入力

HTML は Drupal によって生成されるため、その構造を変更することはできません。

<div class="content clearfix">
    <div class="field field-name-field-gallery-work-order field-type-image field-label-hidden">
        <div class="field-items">
            <div class="field-item even"><img typeof="foaf:Image" src="http://www.gcca.eu/sites/default/files/styles/stories-field-thumb/public/ACP/workorders/rwanda_photo_2_land_registration_programme_gcca_eud.jpg" width="200" height="150" alt=""></div>
        </div>
    </div> 
    <div class="field field-name-field-country-media field-type-taxonomy-term-reference field-label-inline clearfix"><div class="field-label">Country:</div>
    <div class="field-items">
        <div class="field-item even">Madagascar</div>
    </div>
</div>
<div class="field field-name-field-region field-type-list-text field-label-inline clearfix">
    <div class="field-label">Region:&nbsp;</div>
    <div class="field-items">
        <div class="field-item even">Africa</div>
    </div>
</div>
...

そして、次のスタイルを画像に設定しています：

.node-work-order .field-type-image img {
   float: left;
   margin: 0 15px 5px 0;
}

.field-type-image img {
    background: #F3F0E8;
    border: 1px solid #DAC5B4;
    padding: 10px;
    margin: 0 0 10px 0;
}

国の下と画像の右側に地域やその他の属性を揃えるにはどうすればよいですか?

4

2 に答える 2

2

float:leftイメージではなく、イメージ コンテナーにa を配置します。

.field-type-image{
    float:left;
}    

 .field-label-inline{
    margin-left: 280px; /* width of the image */
}

または、画像の幅が異なる場合は、隠しオーバーフローでコンテンツを揃えることができます。

.field-type-image{
    float:left;
}    

.field-label-inline{
    overflow:hidden;    
}
于 2013-01-21T14:44:57.957 に答える
0

2 番目の div はフロートをクリアしているため、フロートはそのままです。次のように clearfix を無効にすることができます。

.field-name-field-region.field-type-list-text.field-label-inline{
    clear:none
}
于 2013-01-21T15:01:32.973 に答える