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。我需要在这里工作。这是理想的结果：

enter image description here

爆头上没有任何造型，这就是它的样子： enter image description here

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

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

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

并且绝对位置： enter image description here

我也尝试将浮动放在保存图像的“最上面”的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/

enter image description here

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

Answer 2

如果您可以访问Drupal中的View本身，则可以重新排序元素。登录Drupal后，打开视图（在Drupal 7：Structure＆gt; Views＆gt; Viewname中），查找“Fields”并单击“add”旁边的三角形，这将有一个弹出窗口，然后单击“重新排列”。然后，您可以将照片字段拖动到视图中的第一个项目，然后调整CSS以将图像浮动到左侧。

Answer 3

艾美奖，

您是否考虑过制作其他人float:left，而不是试图将头像投向float:right？这会给人留下图像浮动的印象，而不必以任何方式更改标记。

div.speaker-list div.views-row > div.views-field {
    float:right;
    clear:both;
}
div.speaker-list div.views-row > div.views-field.views-field-field-headshot {
    float:none;
    clear:none;
}

上面的CSS应该可以使用该特定配置，而无需更改任何其他Drupal生成的标记。为了确保其他CSS不会干扰，我尽可能地应用了特殊性。由于爆头将回到包含<div>中，你不应该改变它的大小，除非商店太大（我不知道你不知道你的数据）。最后，CSS很简洁，因此您可以在每个元素的基础上添加所需的任何其他样式。

希望这有帮助，

FuzzicalLogic

Answer 4

当您可以在页面上的其他位置删除某些代码时，您可以使用jQuery控制HTML。然后你可以修改DOM树。

但我不明白为什么你不能编辑HTML。 Drupal不是开源的吗？您应该能够使用FTP找到该文件并对其进行操作。

如何在div中浮动图像

4 个答案: