2016-03-01 3 views
1

Итак, на моем profile.php у меня есть вкладка, которая загружается и отображает последние 10 сообщений, которые пользователь получил в своем профиле. Я пытаюсь отобразить каждую область в div, а затем плавать пользователь, который отправил на изображение страницы, размещенную слева от div. Но когда я делаю это, все divs рушится странным образом. Как показано здесь:Очистка CSS не работает должным образом

enter image description here

Так после того, как у меня были некоторые проблемы с этим я попытался добавить ясно: то и другое; строка кода внутри кода изображения, и это то, что он дал мне:

enter image description here

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

Вот код, который работает в DIV сообщения:

while ($r = $query->fetch(PDO::FETCH_ASSOC)) { 
      ?> 
      <div style="background-color: white; color:black; margin-left:280px; padding:5px; font-family: Sintony; font-size:16px; margin-bottom:5px;"> 
       <img src="<?=user::idToPic($r['userID'])?>" width="50" height="50" style="float:left;" /> 
       Test Message 

       <div style="clear:both;"> </div> 
      </div> 

      <?php 
     } 

Это выход браузеров для первого сообщения, то второе сообщение

enter image description here

+0

Можете ли вы сделать jsfiddle или plnkr с выходом HTML? – martin

+0

@Martin, что трудно сделать в этом случае, потому что есть нагрузка, но я сделал jsfiddle как кластерный, как он есть: https://jsfiddle.net/p23Lzx0p/1/ Основные divs to look at are rightarea и leftarea – Jek

+0

Осмотрите первую строку, чтобы увидеть, что вызывает нежелательное пространство с помощью инструментов разработчика браузеров. – Vucko

ответ

1

Положите height: 50px; на каждом DIV, или просто использовать классы.

Here you go

+0

Комментарии могут отличаться по размеру, так что, когда текст больше, чем 50 пикселей? Это будет работать с использованием 50px на div, но что, если содержание превышает 50px? – Jek

+0

Я удалил ясный и добавил ваш метод, и это сработало :) Спасибо mate оценили 'min-height: 50px; background-color: white; черный цвет; Левое поле: 280px; обивка: 5px; font-family: Sintony; Размер шрифта: 16px; margin-bottom: 5px; ' – Jek

+0

Без проблем я рад, что я помог u –

1

Изменение его мин-высота: 50px

Смежные вопросы