Как можно адаптировать right sidebar?

Question

Astro4 @Astro4

Как можно адаптировать right sidebar?

Изучаю сейчас верстку и адаптацию. И вот практически все зафиксировалось, а как можно сделать, то-б при больших, расширенных размерах экрана, right sidebar не убегал, а был рядом с картинкой?

Вопрос задан более трёх лет назад
69 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

alex @potapchino

где код?

Написано более трёх лет назад

Astro4 @Astro4 Автор вопроса

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8"/>
<title> Верстка </title>
<link href="Verstka.css" rel="stylesheet" type="text/css"/>



</head>

<body>
  <header>
<div class="top">
    <h1> Немецкая овчарка <h1>
</div>
    
  </header>	
  
  <div class="midle">
  <div class="left_sidebar"> Немецкая овчарка — порода собак, изначально использовалась в качестве пастушьей и служебно-розыскной собаки.

Немецкая овчарка была получена в результате селекции и скрещивания некоторых разновидностей гуртовых собак Центральной и Южной Германии. Различают гладкошёрстную и длинношёрстную разновидности.

В наше время немецкие овчарки занимаются выставочной карьерой, охраной, а также являются собаками для семьи.</div>

  <div class="content"> <img src="nemetskaya-ovcharka8.jpg" width="400" height="300"> </div>
  
  <div class="right_sidebar"> Немецкая овчарка универсальна. Она одинаково хорошо может служить собакой-компаньоном, 
  охранной, защитной, сыскной, служебной и караульной собакой. Успешно используется в животноводстве как пастушья собака. 
  Чаще других пород используется на службе в армии, в полиции, для охраны государственных границ. Хорошо выдрессированная 
  немецкая овчарка незаменима при задержании преступника. Используется для сопровождения слепых. Прекрасно ладит с детьми.
  </div>
  </div>

  
  <footer>
  
 <div class="podval">
    <div>
	<div>
	  <h3> Информация была взята из википедии. </h3>
	</div>
    </div>
 </div>	  
  
  </footer>
 
  
  
  </body>
  
  
  </html>

.top{
	background:green;
	text-align:center;
}
.content{
	float:left;
	width:35%;
	height:auto;
	 
}
.left_sidebar{
	float:left;
	width:25%;
	height:auto;
}
.right_sidebar{
	float:right;
	width:25%;
}
.podval{
	clear:left;
	width:100%;
	background:blue;
}
.midle{
	width:100%;
	height:auto;
}
.content img
{
	padding-left:50px;
}
html, body,h1{margin: 0;}
@media screen and (min-width: 320px) and (max-width: 2000px){     
.top{
	
}
.left_sidebar{
	
}
.right_sidebar{
	
}
.podval{
	
}
.midle{

	
}
.content img{
	
}

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1