css - 对齐位于图像的右侧

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

如何将 Country 下的区域和其他属性与图像右侧对齐？

Answer 1

将 afloat: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
}