0

我已经查看了有关此问题的类似问题，但似乎都没有真正解决我遇到的问题。现在我只是想显示一个程式化的列表，并且遇到的麻烦比我认为的要多得多。

这里有一个小提琴。基本上我只希望测试片段显示在图像旁边。

这是正在使用的实际模板 html (Mako)：

% for datum in data.entries:
    <a href="#">
        <div class="result-container">
            <div class="result-header">
                <h1 class="result-title">${datum.data['display_name']}</h1>
            </div>
            <div class="result-body">
                <div class="thumbnail-wrapper">
                    <div class="result-thumbnail">
                        <img class="thumbnail" src="${datum.thumbnail}" alt="${datum.data['display_name']}"></img>
                    </div>
                </div>
                <div class="result-snippets">
                    <div class="snippet">
                    ${datum.snippets}
                        </div>
                </div>
            </div>
        </div>
    </a>
% endfor

编辑：

我意识到我说得不够清楚，所以我更新了小提琴并发表了一些评论，但请注意，这些元素中的每一个都在 aLIST中，也就是说，相同的东西会在页面下方出现多次。我正在寻找可以工作的东西，不仅仅是一次，而是每个列表项。

如何让片段显示在图像的右侧。或者更好的是，为什么会这样呢？

4

3 回答 3

2

将其更改为

 .thumbnail-wrapper {
        /*    width: 285px;
    */
        float:left;
        overflow:hidden;
    }

更新： 使用您更新的小提琴将其更改为

.result-container {
    margin: 0 auto;
        clear:both;
}
于 2013-08-08T19:13:39.117 回答
1

如果我明白你需要什么

http://jsfiddle.net/ZffFv/8/

 .result-snippets {
position: absolute;
top: 100px;
left:300px;
}
于 2013-08-08T19:18:04.267 回答
0

这是你想要做的吗？我的片段漂浮在图像旁边。

http://jsfiddle.net/ZffFv/2/

HTML：

<a href="#">
     <div class="result-container">
          <div class="result-header">
               <h1 class="result-title">Test Title</h1>
          </div>
          <div class="result-body">
               <div class="thumbnail-wrapper">
                    <div class="result-thumbnail">
                     <img class="thumbnail" src="http://www.anirudh.net/courses/cse585/project1/results/orig/lenna.gif" alt="${datum.data['display_name']}"></img>
                </div>
                    <div class="result-snippets">
                     <div class="snippet">
                     This is a test snippet
                      </div>
                </div>
              </div>
           </div>
     </div>
</a>

CSS：

.result-header {
    text-align: center;
    word-wrap: normal;
    padding-top: 20px;
}
.result-container {
    margin: 0 auto;
}
.snippet {
    color: #666666;
    font-family:"Open Sans", "Arial";
    font-weight: 300;
    width: 200px;
    text-align: center;
    overflow-y: hidden;
}
.thumbnail-wrapper {
    /*    width: 285px;
*/
    overflow:hidden;
}
.result-thumbnail {
    width: 300px;
    overflow-x: hidden;
    float: left;
}
.result-snippets {
    float: right;
}
.result-title {
    text-align: center;
    font-size: 20px;
}
.page-number {
    width: 30px;
}
.search-icon {
    text-align: right;
}
于 2013-08-08T19:11:33.887 回答