Как разместить несколько разделов, содержащих текст и плавающее изображение, чтобы они стекали по одной странице за раз и не перекрывались?

Question

У меня есть пользовательский помощник, который возвращает строку html. Какие выводит последующий HTML код:

<div> 
    <div class='floatRight'> 
     <img height='300' src='{0}' /> 
    </div> 
    <div class='clearFloat'> 
     <h4>{1}</h4> 
     <p>{2}</p> 
    </div> 
</div> 

Когда это помещается внутри цикла Еогеасп Я хочу, чтобы это показать заголовок и абзац текста с изображением инлайн справа от него. Если высота изображения больше, чем заголовок и текст, тогда я хочу, чтобы следующий заголовок и текст появлялись под линией предыдущего изображения. Однако результатом я получаю диагональное позиционирование изображений слева вниз. Я уверен, что это простое решение, но ничего не работает. Я не уверен, что это проблема с float или проблема div, поскольку изображения текут в другие div. В основном я хочу, чтобы очень внешний div расширялся с увеличением: высоты изображения или текста, чтобы следующий div был помещен под ним, а не только под текстовую часть.

Для более наглядного примера я искал что-то будет повторить это:

<table> 
    <tr> 
     <td> 
      <h4>Title</h4> 
      <p>Text Text Text Text Text </p> 
     </td> 
     <td><img width="300" height=300" /></td> 
    </tr> 
</table> 

я пытался избежать, чтобы избежать таблицы, но, возможно, плавающие дивы так же плохо.

Answer 1

Из вашего описания, похоже, ваша проблема в том, что вы пытались использовать поплавки.

Решение ниже. Дайте мне знать, если я не понимаю, что вы пытаетесь сделать.

/* Demo Styles 
 
-------------------------------- */ 
 
img { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
li:nth-child(1) img { background:dodgerblue } 
 
li:nth-child(2) img { background:gold } 
 
li:nth-child(3) img { background:red } 
 

 

 

 
/* Reset Default Browser Styles 
 
-------------------------------- */ 
 
* { margin:0; padding:0 } 
 

 
li { 
 
    list-style: none; 
 
} 
 

 

 
/* Layout 
 
-------------------------------- */ 
 
/* All direct children of the list element */ 
 
li > * { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<li> 
 
    <div> 
 
    <h1>Your title</h1> 
 
    <p>The description of descriptions of descriptions</p> 
 
    </div> 
 
    <img> 
 
</li> 
 

 
<li> 
 
    <div> 
 
    <h1>Your title</h1> 
 
    <p>The description of descriptions of descriptions</p> 
 
    </div> 
 
    <img> 
 
</li> 
 

 
<li> 
 
    <div> 
 
    <h1>Your title</h1> 
 
    <p>The description of descriptions of descriptions</p> 
 
    </div> 
 
    <img> 
 
</li>

редактируемые демо: http://jsbin.com/puveba/2