@SplashWeb

Можно ли сдвинуть вниз блоки меню без использования flex?

Здравствуйте!

Подскажите пожалуйста, можно ли при сворачивании страницы (мобильном разрешении) сдвинуть вниз блоки меню без использования flex?

Необходимо, чтобы блоки навигации были внизу, а контент перемещался выше.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content='text/html; charset=utf-8'>
<link href="/style.css" rel="stylesheet" type="text/css"></head>

<body>

<div class="main">
<div class="menu">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
  </ul>
</div>

<div class="menu2">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
  </ul>
</div>

<div class="content">
<h1>Что такое Lorem Ipsum</h1>
Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>

</div>

</body>
</html>


* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html, body {padding: 0; margin: 0;}
body {
	font-size: 70%;
	color: #325050;
	font-family: Arial, Tahoma, sans-serif;
	background: #fff;
}

div {font-size: 1.2em;}
a:link, a:visited {color: #111; text-decoration: underline;}
a:hover {color: #000; text-decoration: underline;}
h1,h2 {font-size: 1.5em; font-weight: normal; color: #222; margin: 0; padding: 4px 0; text-decoration: none;}

.main {width: 1000px; margin: 40px auto;}

.menu {width: 200px; background: #e5ede8; float: left;}
.menu2 {width: 200px; background: #e5ede8; float: right;}
.content {background: #efefef; padding: 20px; margin: 0 210px; text-align: justify;}

@media screen and (max-width:640px) {
	.main {width: 100%;}
}
  • Вопрос задан
  • 513 просмотров
Пригласить эксперта
Ответы на вопрос 3
@Novamoscow
насколько я понял тебе нужно элементы в потоке местами поменять, в голову приходит свойства позишен
Ответ написан
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
изначально в dom располагай элементы так как ты хочешь видеть их на мобильном. а на декстопе уже двигай их влево и вправо. к примеру через position: relative;
https://jsfiddle.net/t0ecjokn/
Ответ написан
Комментировать
bugo_aneo
@bugo_aneo
Верстальщик по жизни, буддист, кофеман
Эм... А чем вам order не угодил???
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы