Question

我已经看过关于这个问题的类似问题，但它们似乎都没有真正解决我所遇到的问题。现在我只是想显示一个程式化的列表，并且遇到的麻烦比我觉得的要多得多。

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

这是正在使用的实际模板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

编辑：

我意识到我没有说清楚这一点，所以我更新了小提琴并发表了一些评论，但请注意，这些元素中的每一个都在LIST这就是同样的事情会多次出现在页面上。我正在寻找能够发挥作用的东西，不仅仅是一次，而是每个列表项目。

如何让代码段显示在图片的右侧。或者甚至更好，为什么它首先就是这样？

Answer 1

将其更改为

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

<强>更新随着你的更新小提琴将其更改为

.result-container {
    margin: 0 auto;
        clear:both;
}

Answer 2

如果我理解你的需要

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

 .result-snippets {
position: absolute;
top: 100px;
left:300px;
}

Answer 3

这是你想要做的吗？我有一个浮动图片旁边的片段。

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

Div出现在父div之外

3 个答案: