Divs, появляющиеся вне родительских divs

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 

EDIT:

я понял, что я не сделал этого достаточно ясно, так что я обновил скрипку и сделал некоторые замечания, но обратите внимание, что каждый из этих элементов находится в LIST. То же самое будет отображаться несколько раз, когда идет вниз по странице. Я ищу что-то, что будет работать не только один раз, но и для каждого элемента списка.

Как получить фрагмент, который будет отображаться справа от изображения. Или даже лучше, почему это так?

Answer 1

Изменить его

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

Обновление: С обновленной скрипкой Измените его на

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

Answer 2

Это то, что вы ищете? У меня есть фрагмент, плавающий рядом с изображением.

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

Answer 3

Если я понимаю, что вам нужно

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

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