Форум

nekada · #1 (**permalink**) 21.11.2016, 04:50

Приветствую, есть такая структура.

<div class="wrapper">
  <div class="content"></div>
  <div class="sidebar"></div>
</div>

При уменьшении окна браузера нужно прижимать div content - дивом sidebar.

sidebar на float:right или на inline-block и имеет стат. width:200px;
content на max-width и min-width, нужно, что бы sidebar прыгал под контент, когда content достигнет min-width.

В настоящий момент при уменьшении окна sidebar прыгает под content и уже потом content прижимается окном.

ksa · #2 (**permalink**) 21.11.2016, 08:50

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border: 1px solid;
}
.content {
	flex-basis: auto;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 400px; 
	max-width: 800px; 
	height: 100px;
	background-color: red;
}
.sidebar {
	flex-basis: 200px;
	height: 100px;
	background-color: green;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="wrapper">
	<div class="content">content</div>
	<div class="sidebar">sidebar</div>
</div>
</body>
</html>

nekada · #3 (**permalink**) 21.11.2016, 23:52

Благодарю за попытку помочь, но что-то не работает, полностью сделал как Вы описали...
Sidebar по прежнему уезжает под контент, как только не хватает места ему....

ksa · #4 (**permalink**) 22.11.2016, 08:20

Сообщение от nekada

Sidebar по прежнему уезжает под контент, как только не хватает места ему....

А разве не этого ты хотел?

Сообщение от nekada

нужно, что бы sidebar прыгал под контент

nekada · #5 (**permalink**) 22.11.2016, 20:27

Вы сейчас троллите ? )))

Цитата:

, когда content достигнет min-width.

Форум

Справочник

Discord чат

Курсы javascript