将 <div> 对齐到图像的右侧答案

【问题标题】：Align <div>'s to the right of an image将 <div> 对齐到图像的右侧
【发布时间】：2013-01-21 14:39:30
【问题描述】：

我被一些 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 下的区域和其他属性与图像右侧对齐？

【问题讨论】：

标签： css drupal

【解决方案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;    
}

【讨论】：

@AndreaLigios 不，你不应该总是摆弄小提琴。这段代码太简单了，无法保证 jsfiddle。为了它而使用它是没有意义的
这将帮助您获得更多的选票，这要归功于来自可测试性的即时反馈。您应该将其添加到答案中，而不是在 cmets 中:)
@Clive：不需要 OP，但是对于必须设置代码来测试自己的读者来说有点优势。节省 1 分钟，赚取 1 分钟...
@AndreaLigios 获得选票不应该是回答问题的目标，这对 Stack Exchange 网站来说是一种不好的态度。更常见的“代表嫖娼”是一个需要消除而不是鼓励的问题。但无论如何，这不是我的意思。我的观点是，您关于“您应该（总是）放一个小提琴”的建议是不正确的。在适当的地方，当然，但不是为了像这样微不足道的事情。如果 OP希望添加一个，很好，但没有必要提示人们这样做
@Clive：目标不应该是不获得选票；）我明白你的意思，并同意你的观点，即发布的代码并不难测试，我不会再宣传 fddling 以获得最低限度的答案......但我的建议与 rep whoring 无关，它只是为了帮助提供更直接（并且轻松投票，这不是一件坏事，直到它不是你生活中的主要目标）答案。干杯！ :)

【解决方案2】：

第二个 div 正在清除浮动，这就是它保持向下的原因。您可以像这样取消 clearfix：

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

【讨论】：