Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 15.05.2018, 14:52   #1
Serduk
Новичок
 
Регистрация: 15.05.2018
Сообщений: 1
Репутация: 10
Сообщение Съезжает блок номер 2.

Здравствуйте, уважаемые форумчане.
Я сделал два отзывчивых блока.
Но при уменьшении окна браузера "block2" съезжает вниз, а при увеличении слегка съезжает вверх.

Как сделать так, чтобы "block2" не съезжал и держался на месте как "block1".
Хотелось бы сотворить данную идею без bootstrap и кучи медиа-запросов.
Заранее благодарю.





Html код:

Код:


<!DOCTYPE html>
 
 
<html>
 
        
  <head>
 
    
     <meta charset="utf-8" />
 
     <link  href="test.css"  rel="stylesheet" type="text/css" />
  
  
  </head>
 
 
           
            <body>
 
           
 
         <div class="block1">  
 
Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.
 
         </div>  
 
   
         
         <div class="block2">  
 
Самым известным «рыбным» текстом является знаменитый Lorem ipsum. Считается, что впервые его применили в книгопечатании еще в XVI веке. Своим появлением Lorem ipsum обязан древнеримскому философу Цицерону, ведь именно из его трактата «О пределах добра и зла» средневековый книгопечатник вырвал отдельные фразы и слова, получив текст-«рыбу», широко используемый и по сей день. Конечно, возникают некоторые вопросы, связанные с использованием Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается.
 
И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта. Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов.
 
 
         </div>  
 
 
 
           </body>
 
 
</html>





CSS код:
Код:

.block1 {
position: relative;
display:block;
width: 30%;
font-size: 1.4vmax;
margin-left: 66%;
margin-top: 5%;
background: rgba(204, 255, 255, 0.3);
border-radius: 1em;
border: 0.2vh solid black;
padding: 1%;
}
 
 
.block2 {
position:relative;
margin-left: 3%;
margin-top: -22.2%;
display: block;
width: 58%;
color: dark;    
font-family: oswald;    
font-size: 1.4vmax;
border: 0.2vh solid black;
padding: 1%;
background: rgba(204, 255, 255, 0.3);
border-radius: 1em; 
}

Изображения
Тип файла: jpg nomal.jpg (106.4 Кб, 1 просмотров)
Тип файла: jpg error.jpg (110.0 Кб, 2 просмотров)
Serduk вне форума   Ответить с цитированием
Старый 15.05.2018, 23:53   #2
Stanislav
Квадрокоптерист
Профессионал
 
Регистрация: 29.09.2007
Сообщений: 1,751
Репутация: 489
По умолчанию

С телефона поэтому просто статейку скину попробуйте может подойдёт https://m.habr.com/company/edison/blog/344878/
__________________
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума   Ответить с цитированием
Старый 17.05.2018, 15:01   #3
Javany
Форумчанин
 
Регистрация: 15.05.2018
Сообщений: 52
Репутация: 42
По умолчанию

Убрал :
margin-top
position: relative;
добавил:
float: left;
Попробуйте, все работает.
Код:

   .block1 {
width: 30%;
font-size: 1.4vmax;
margin-left: 3%;
background: rgba(204, 255, 255, 0.3);
border-radius: 1em;
border: 0.2vh solid black;
padding: 1%;
 float: left;
}
 
 
.block2 {
width: 58%;
margin-left: 3%;
color: dark;    
font-family: oswald;    
font-size: 1.4vmax;
border: 0.2vh solid black;
padding: 1%;
background: rgba(204, 255, 255, 0.3);
border-radius: 1em; 
float: left;
}

Javany вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему когда вставляю h1 в div, он съезжает? Enough1987 HTML и CSS 3 31.01.2015 22:06
RAD 2010 - съезжает печать alexusankov C++ Builder 0 10.01.2014 09:46
Съезжает текст вправо WORD RikkiTan Помощь студентам 0 12.06.2013 11:18
съезжает css фон меню Morgusha HTML и CSS 0 10.06.2013 17:38
Съезжает меню! MaxD HTML и CSS 1 02.08.2011 14:54


08:10.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru