Bymas | div вылазит за пределы сайта

Тема закрыта by

pyrokinesis
Причина: Решено

не пойму что за дичь 2 часа парюсь , не могу сообразить почему див вылазит за пределы, по форумам лазил не один вариант не помог .

php

   echo '<div class="message-content"><div class="message-box">';  $q=mysql_query("SELECT * FROM `mail` WHERE `id_user` = '$user[id]' AND `id_kont` = '$ank[id]' OR `id_user` = '$ank[id]' AND `id_kont` = '$user[id]' ORDER BY id DESC LIMIT $start, 10"); while ($post = mysql_fetch_array($q)) {    $ank2=get_user($post['id_user']); echo '<div class="' . ($ank2['id'] == $user['id'] ? "message-box__item incoming" : "message-box__item outgoing") . '">';     if ($ank2)  echo "<div class='name'><a href=\"/p/?id=$ank2[id]\">$ank2[nick]</a>"; echo "".online($ank2['id'])."</div>"; echo '<div class="box-text">'; echo output_text($post['msg'])."\n"; echo " <div class='time'>".vremja($post['time'])."</div>"; echo '</div>'; echo "</div>"; } echo '</div></div>';

css

   /**Mail**/ .message-content {    min-width: 0;     overflow-wrap: break-word;   border: 2px solid  red;   position: relative;   /* margin-left: 15px;*/    }      .message-content .message-content__item .message-content-header {     border-bottom: 1px solid #e0e2e4;     padding: 20px 15px;     position: relative;     height: 95px; }          .message-content .message-content__item .message-content-header .name {       font-size: 21px;       color: #535357;       font-weight: 500; }            .message-content .message-content__item .message-content-header .phone {       font-size: 16px;       color: #a3a3a7; }            .message-content .message-content__item .message-content-header img {       position: absolute;       top: 30px;       right: 15px; }                 .message-content .message-box {     padding: 25px;     height: calc(100% - 175px); }          .message-content .message-box .message-box__item {       margin-bottom: 15px; }              .message-content .message-box .message-box__item.incoming {         text-align: left; }                  .message-content .message-box .message-box__item.incoming .time {           right: 0; }       .message-content .message-box .message-box__item.outgoing {         text-align: right; }                  .message-content .message-box .message-box__item.outgoing .time {           left: 0; }                  .message-content .message-box .message-box__item .name {         color: #535357;         font-size: 16px;         font-weight: 400; }                .message-content .message-box .message-box__item .box-text {         background: #f0f2f4;         display: inline-block;         padding: 20px 15px;         padding-right: 50px;         font-size: 16px;         color: #535357;         border-radius: 7px;          max-width: 90%;         margin-top: 10px;         text-align: left;         position: relative;         margin-bottom: 20px;         word-wrap: break-word; }                  .message-content .message-box .message-box__item .box-text .time {           position: absolute;           bottom: -25px;           font-size: 13px;           color: #939397; }              .message-content .message-form {     height: 75px;     border-top: 1px solid #e0e2e4;     padding: 20px 15px; }          .message-content .message-form input {       width: calc(100% - 50px);       border: none;       font-size: 16px;       margin-top: 5px; }            .message-content .message-form img {       float: right;       margin-top: 10px; }

Изображение

------

90121_20260407092001.png (85.4 Kb)
Скачиваний: 7

основной контейнер

css

   .message-content {    min-width: 0;      overflow-wrap: break-word;    border: 2px solid  red;    position: relative;   /* margin-left: 15px;*/     }

не помогает , нечего не выходит (( width:100%;
________
посл. ред. 07.04.2026 в 09:25; всего 1 раз(а); by pyrokinesis

pyrokinesis ,

html

   .  .message-content .message-form input {       width: calc(100% - 50px);       border: none;       font-size: 16px;       margin-top: 5px; }

и куда мы приехали?😏🤔🤨

pyrokinesis , опять же, смотри отступы и позиционирования, ато у тебя как то все в каше, float:right, а позиция стоит обратное

БЕЛАЗ , та понимаю, я обычный контейнер делал , без всяких позиций, все равно выходит за рамки

pyrokinesis , тогда используй его как основной, дай ему значения display:block; width:100%; выстави отступы padding и margin, а в нем уже используй другие дивы

Адаптацию через @media запросы не нужно делать для разных расширений?, то что работает на пк хорошо всегда будет криво на мобилках на мобилках нужно упрощать стиль и само расположение элементов и создавать альтернативную верстку под разные расширения. Вот простой шаблон видеокаталога (https://ftp.3ex.ru/) созданый через нейросеть с минимальной адаптацией на растягивание окна браузера, а если смотреть на различных девайсах в отладке браузера увидешь что не все так уж хорошо выглядит без полноценной @media адаптации
________
посл. ред. 07.04.2026 в 10:18; всего 4 раз(а); by Mr[G]Pro

Mr[G]Pro (Вчера в 10:02)
Адаптацию через @media запросы не нужно делать для разных расширений?, то что работает на пк хорошо всегда будет криво на мобилках на мобилках нужно упрощать стиль и само расположение элементов и создавать альтернативную верстку под разные расширения. Вот простой шаблон видеокаталога (https://ftp.3ex.ru/) созданый через нейросеть с минимальной адаптацией на растягивание окна браузера, а если смотреть на различных девайсах в отладке браузера увидешь что не все так уж хорошо выглядит без полноценной @media адаптации

👍👍👆👆👆

БЕЛАЗ , я так делал еще к примеру

css

   .comm{ width:100%;  display:inline-block;}

<div class="comm"> ..... </div> всеравно вылазит за див

pyrokinesis (Вчера в 10:05)

БЕЛАЗ , я так делал еще к примеру

css

   .comm{ width:100%;  display:inline-block;}

<div class="comm"> ..... </div> всеравно вылазит за див

Тебе выше написали, и я в ВК написал то же самое, используй адаптацию, не нужно подгонять под свое разрешение монитора, каждый браузер видит по разному тот или иной контейнер, а некоторые и вообще не видят