Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Почему текст в html пишется не после блока, а над ним

kre vash Ученик (146), на голосовании 5 месяцев назад
создала блок с текстом через div, расположен горизонтально почти во всю ширину экрана, высота 40vh. после него хочу перейти к следующему «разделу», пишу текст, прописывается либо выше блока либо на нем, с изображением также. <hr> тоже становится либо над блоком либо в нем. помогите, что сделать чтобы текст шел ниже блока как следующий абзац.
код выглядит примерно так:
<div class=“block”>коробка с текстом</div>
<p>текст</p>

пишу сайт для проекта. косяков много, 2 подряд br…но мне главное чтобы визуально веб-страница выглядела подобающе, по скольку сроки горят, времени подробно изучать нет
Голосование за лучший ответ
Сухачев Мудрец (12960) 6 месяцев назад
Ваш код выглядит правильным, и обычно, как вы предполагали, HTML следует вертикальному потоку, и новые элементы появляются под предыдущими. Однако, внешний вид вашего веб-сайта может измениться в результате CSS.

Одна из возможных причин, почему текстовый блок появляется выше блока div, может быть связана с CSS. Возможно, есть CSS-правило, которое изменяет расположение ваших элементов HTML. Например, CSS свойства, такие как position, float, flexbox, grid или даже margin и padding, могут изменять положение элементов на странице.

Пожалуйста, проверьте свои CSS-правила и убедитесь, что нет ничего, что может вызвать это поведение.

В этом случае было бы полезно увидеть больше вашего кода и, возможно, предоставить информацию о части вашего CSS, где вы определяете стили для класса 'block'.
kre vashУченик (146) 6 месяцев назад
спасибо большое!
.block {
position: relative;
opacity: 1;
background: rgb (67, 68, 82) ;
height: 35vh;
width: 1350px;
border: 7px dotted
•rgb (255, 255, 255);
border-bottom: 1;
border-top-style: solid;
border-style: double;
opacity: 0.5;
padding: 10px;
top: -300px;
left: -10px;
bottom: 10px;
float: right;
text-align: center;
right: 5px; }
Сухачев Мудрец (12960) kre vash, Из того, что я вижу, директива "top: -300px;" на самом деле поднимает ваш блок выше на 300 пикселей. Это может быть причиной того, что следующий элемент (ваш абзац с текстом) отображается под блоком в коде, но выше на веб-странице. Аналогично, "float: right;" может быть причиной нежелательного поведения. Это свойство заставляет блок двигаться вправо, а остальной контент - заполнять оставшееся свободное пространство слева. Попробуйте удалить или изменить эти две строки и посмотреть, улучшится ли ситуация. Также учтите, что с помощью CSS вы можете контролировать, как элементы взаимодействуют друг с другом. После того, как вы сделали изменения, весь ваш контент должен пройти корректно и по порядку, если нет других CSS-правил, которые могли бы повлиять на его расположение.
Павел Волгин Просветленный (30660) 6 месяцев назад
Див в п заключить не пробовала в этом изврате?
kre vashУченик (146) 6 месяцев назад
пробовала, без изменений
Павел Волгин Просветленный (30660) завязывай с этим извратом, вставь просто текстом: быстрее будет, чем в чужом классе будешь искать косяк...
Павел ВолгинПросветленный (30660) 6 месяцев назад
По ходу, вспомнил: ищи в цсс или пропиши в теге "поситион: абсолюте", может там релативе стоит...
Александр Искусственный Интеллект (301569) 6 месяцев назад
откуда нам знать что за класс block ты используешь...
Похожие вопросы