Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 15.05.2018, 13:52   #1
Serduk
Новичок
Джуниор
 
Регистрация: 15.05.2018
Сообщений: 1
Сообщение Съезжает блок номер 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 Кб, 135 просмотров)
Тип файла: jpg error.jpg (110.0 Кб, 138 просмотров)
Serduk вне форума Ответить с цитированием
Старый 15.05.2018, 22:53   #2
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

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

Убрал :
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 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему когда вставляю h1 в div, он съезжает? Enough1987 HTML и CSS 3 31.01.2015 21: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