css - 如何让图片在div中 float

Question

我有这个 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 View 动态生成的，所以我根本无法更改输出的 html。我需要处理这里的内容。这是期望的结果:

头像上没有任何样式，这就是它的样子:

我试图设置图像的样式以强制它 float 到文本的左侧:

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

显然我做错了什么，因为这是我得到的(相对位置):

和绝对位置:

我还尝试将 float 放在保存图像的“最上面”div 类上，但 div 上没有任何位置:

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

它给出与位置相同的结果:相对屏幕截图。

我哪里错了？如果我可以控制 html，我会采用不同的方式，但我不确定如何处理所有这些嵌套的 div。

编辑为@WEX 添加新屏幕截图

这是我尝试将您的代码与重新排序的 html 一起使用时的样子 - http://jsfiddle.net/mPa7z/

Answer 1

我将尝试解释使用 float 的“正确”方式这样您就可以了解为什么您的方法不起作用。

在您的帖子中，您尝试申请 float: left到 <div>环绕您的图像，但该技术仅在您 float 的元素高于您要环绕它的所有元素时才有效。这个“可能”解决了你的问题，但是如果你试图用它来创建两个不同的列，那么这个技术就有它的缺陷——如果右边的文本比 float 元素高，右边的文本将环绕在它下面.因此，您必须在非 float 元素周围添加另一个容器，以确保它不会换行。这可以解决您的问题，但如果您甚至无法编辑标记，那也无济于事!

我认为我在下面发布的技术效果更好，并且可以解决您的问题: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; }​