Как сделать так, чтобы в div одно находилось под другим

#php #html #css

#php #HTML #css

Вопрос:

Здравствуйте, я создаю скрипт разбивки на страницы, я уже все сделал, и теперь я пытаюсь создать индексную страницу, она будет содержать данные, извлеченные из базы данных, и я хотел, чтобы они были представлены в виде двух разделов, первый для миниатюры, а другой будет содержать заголовок под миниатюрой. Итак, вот мой код: вот цикл, для него все в порядке, я просто хочу, чтобы вы увидели html-код внутри.

 $brk_cnt = 0;

while($row = mysqli_fetch_array($results))
{
 echo ' <td>
        <div class="datamore">'.$row['thumbnail'].'</div><div class="data1r1">$row['title']</div>
        </td>';

 //break or print <tr> condition
 if(  $brk_cnt % 4 == 0)
 {
    echo '</tr><tr>';
 }
}


echo '</table>';
  

и css :

 .data1r1 {
width:198px;
height:235px;
background-color:#4D72B7;
border-radius:5px;
/* border shits */
border:1px;
border-color:black;
border-style:solid;
border-radius:5px;
clear:both;

}
.datamore {
width:198px;
height:150px;
background-color:#C7441A;
position:absolute;
border-radius:5px;
clear:both;
}
#table {
    margin-left:250px;
    margin-top:20px;
    position:absolute;
}
  

Хотя сначала я использую правильный css, но при печати данных это не очень хороший результат, вот как выглядит divs :

divs
(источник:hostingpics.net)

два div-файла накладываются один на другой.. я хочу получить синий под оранжевым. Спасибо, извините за это длинное описание, но я хотел внести ясность.

Ответ №1:

удалите позицию:absolute

 .datamore {
 width:198px;
 height:150px;
 background-color:#C7441A;

 border-radius:5px;
 clear:both;
}
  

Пример

Ответ №2:

замените position:absolute на position:relative

 .datamore {
width:198px;
height:150px;
background-color:#C7441A;
position:relative;
border-radius:5px;
clear:both;
}