1

Мне нужно разместить картинку в блоке, который расположен справа от сайдбара. Если я задаю стиль самой картинке, то она увеличивается до размеров, заданных блоку.
Если задаю стиль блоку, то граница блока разлетается за сайдбар.

.sidebar {
    background: white;
    height: 240px;
    width: 240px;
    float: left;
    padding: 40px 46px 46px 46px;

   }

.sidebar-button{
	display: block;
	height: 28px;
	width: 240px;
	border-top: #c8c8c8 1px solid;
	border-right: #c8c8c8 1px solid;
	border-left: #c8c8c8 1px solid;
	padding-left: 20px;
	text-decoration: none;
	font-size: 15px;
	color: gray;
	padding-top: 12px;

}

.auto
{
	border-bottom: #c8c8c8 1px solid;
}

.sidebar-button:hover{
	background-color: #f9f9f9;
	color: black;
	padding-left: 40px;
	width: 220px;
}

.bike-picture {
	border: #c8c8c8 1px solid;
	margin: 40px 46px 46px 26px;
	width: auto;
	height: 400px;
	padding-top: 40px; 
	text-align: center;
	
}
<div class="sidebar">
	<a class="sidebar-button" href="#">Ноутбуки</a>		
	<a class="sidebar-button" href="#">Планшеты</a>		
	<a class="sidebar-button" href="#">Телефоны</a>		
	<a class="sidebar-button" href="#">Телевизоры</a>		
	<a class="sidebar-button" href="#">Бытовая техника</a>		
	<a class="sidebar-button auto" href="#">Автотовары</a>		
</div>

<div>
	<img class="bike-picture" src="img/bike.png" alt="Bike">
</div>

введите сюда код  

What I need

1 ответ 1

1

попробуй так

.sidebar {
    background: white;
    height: 240px;
    width: 240px;
    float: left;
    padding: 40px 46px 46px 46px;

   }

.sidebar-button{
	display: block;
	height: 28px;
	width: 240px;
	border-top: #c8c8c8 1px solid;
	border-right: #c8c8c8 1px solid;
	border-left: #c8c8c8 1px solid;
	padding-left: 20px;
	text-decoration: none;
	font-size: 15px;
	color: gray;
	padding-top: 12px;

}

.auto
{
	border-bottom: #c8c8c8 1px solid;
}

.sidebar-button:hover{
	background-color: #f9f9f9;
	color: black;
	padding-left: 40px;
	width: 220px;
}

.kartka { /*родитель*/
  width: 200px; /*ширина родительского блока*/
  border: #c8c8c8 1px solid;
  text-align: center;
  margin: 40px 46px 46px 26px;
  float: left;
  }

.kartka img {
  width: 90%; /* задаете шырину относительно родителя  */
  padding: 10px;
	
}
<div class="sidebar">
	<a class="sidebar-button" href="#">Ноутбуки</a>		
	<a class="sidebar-button" href="#">Планшеты</a>		
	<a class="sidebar-button" href="#">Телефоны</a>		
	<a class="sidebar-button" href="#">Телевизоры</a>		
	<a class="sidebar-button" href="#">Бытовая техника</a>		
	<a class="sidebar-button auto" href="#">Автотовары</a>		
</div>

<div class="kartka">
	<img  src="http://www.bikehiredirect.com/images/pix/MaleBike1.jpg" alt="Bike">
  <p>Описание велика</p>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.