如何在div中浮动图像

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视图动态生成的,因此我根本无法更改输出html.我需要在这里工作.这是期望的结果:

爆头没有任何造型,这就是它的样子:

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

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

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

并且绝对位置:

我也尝试将浮动放在保存图像的"最上面"的div类上,而div上没有位置:

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

它给出了与position:relative screenshot相同的结果.

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

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

以下是我尝试使用重新排序的html代码时的样子 - http://jsfiddle.net/mPa7z/

Answer 1

我将尝试解释"正确"的使用方式,float以便您可以了解为什么您的方式不起作用.

在您的文章,您尝试应用float: left到<div>周围的图像,但该技术只有当你是浮动的元素是所有要环绕它的元素上面工作.这可能会"解决"您的问题,但如果您尝试使用它来创建两个不同的列,那么该技术会有陷阱 - 如果右侧的文本高于浮动元素,则右侧的文本将包含在其下方.因此,您必须在非浮动元素周围添加另一个容器,以确保它不会换行.这解决了您的问题,但如果您甚至无法编辑标记,则无法提供帮助!

我认为我在下面发布的技术效果更好,并解决了你的问题: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; }?