Agile Web Development С Rails пример отображает изображение над текстом

Question

Я читаю книгу (Agile Web Development С Rails) и Я сталкиваюсь с проблемой на странице 96.

Я застрял в коде в книге точно, но я получаю это.

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

Answer 1

Я бы организовал эти комментарии, используя div. Первый div для размещения изображения и комментариев. Второй div для размещения изображения. И третий, чтобы оставить комментарий.

HTML-:

<div class="comment-container"> 

    <div class="comment-img"> 
    <!whatever code you use to pull images from the database> 
    </div><!ENDcomment-img> 

    <div class="comment-field"> 
    <!whatever code you use to pull comment content from the database> 
    </div><!ENDcomment-field> 

</div><!ENDcomment-container> 

CSS-:

.comment-container{ 
    padding: 5px; 
    border-bottom: 1px dashed #009fe4; 
    margin: 2px 0 5px 0; 
    } 

.comment-img{ 
    float: left; 
    width: 80px; 
    height: auto; 
    } 

.comment-field{ 
    width: 700px; 
    height: auto; 
    padding: 0 0 0 10px; 
    } 

Я надеюсь, что это выручает.

@ subm0ral

Answer 2

Это position: absolute; в правиле img вашего CSS, который делает изображение над текстом. См. help