6

我有这个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;
}

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

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

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

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

在此处输入图像描述

4

4 回答 4

5

我将尝试解释“正确”的使用方式，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; }​
于 2012-06-07T22:13:50.543 回答
1

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

于 2012-06-08T12:33:36.943 回答
0

艾美奖，

与其尝试爆头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 不会干扰，我已经应用了尽可能多的特异性。由于爆头将返回到 contains 中<div>，因此您不需要更改它的大小，除非商店太大（如果不查看您的数据我不知道）。最后，CSS 很简洁，因此您可以在每个元素的基础上添加您需要的任何其他样式。

希望这可以帮助，

模糊逻辑

于 2012-06-08T12:27:52.393 回答
-1

当您可以在页面的其他位置放置一些代码时，您可以使用 jQuery 来控制 HTML。然后您可以对 DOM 树进行修改。

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

于 2012-06-07T22:11:07.550 回答