将<div>对齐图像右侧</div>

Question

我遇到了一些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;
}

如何在国家和图像右侧对齐区域和其他属性？

Answer 1

在图像容器上放置float:left，而不在图像上：

.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;    
}    

Answer 2

第二个div正在清除浮动，这就是它停留的原因。你可以像这样取消clearfix：

.field-name-field-region.field-type-list-text.field-label-inline{
    clear:none
}