如何浮动图像里面的div [英] How to float image inside of div

问题描述

我有这个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>未来的商店< / a> 
< / span> 
< / div> 
< div class =views-field views-field-field-headshot> 
< div class =field-content> 
< div id =file-53class =file file-image file-image-jpeg contextual-links-region> 
< div class =content> 
< img typeof =foaf：Imagesrc =/ kanderson.jpgwidth =180height =180alt =/> 
< / 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-images div.content img {
 border：1px solid＃666; 
 float：left; 
 position：relative; / *尝试有和没有位置（包括绝对）* / 
 left：30px; 
} 
  

显然我做错了，因为这是我得到的相对位置）：

且具有绝对位置：

我也试过把float放在保存图像的最高div类上，在div上没有位置：

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

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

我在哪里出错？如果我可以控制HTML，我会做不同的，但我不知道如何处理所有这些嵌套的div。

已编辑添加新的SCREENSHOT for @WEX

这是我试图使用您的代码与html重新排序 -

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

I have this 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>

It's dynamically generated by a Drupal view, so I can't change the output html at all. I need to work with what is here. Here's the desired result:

Without any styling on the headshot, this is what it looks like:

I tried to style the image to force it to float to the left of the text:

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

Obviously I'm doing something wrong, because this is what I get (with relative position):

and with absolute position:

I've also tried putting the float on the "uppermost" div class that holds the image, with no position on the div:

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

It gives the same result as the position: relative screenshot.

Where am I going wrong? If I had control over the html I'd do it differently, but I'm not sure how to deal with all of these nested divs.

EDITED TO ADD NEW SCREENSHOT FOR @WEX

Here's what it looks like when I tried to use your code with the html reordered - http://jsfiddle.net/mPa7z/

解决方案

I'll try to explain the "right" way to use float so that you can see why your way didn't work.

In your post, you try to apply float: left to the <div> surrounding your image, but that technique only works when the element you are floating is above all the elements you want to wrap around it. That "may" solve your problem, but that technique has it's pitfalls if you're trying to use it to create two distinct columns - if the text on the right is taller than the floated element, the text on the right will wrap below it. So then you have to add another container around your non-floated elements to ensure that it won't wrap. This solves your problem, but doesn't really help if you can't even edit your markup!

I'd argue that the technique I've posted below works better, and solves your problem: 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; }​

这篇关于如何浮动图像里面的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！