Question

I need to place a picture in a box on the right of the sidebar. div-box has certain size and border.

If i set the style to a picture, it enlarges to the size of the box, when i need it to be 100%.

If i set the style to a box, the box' borders expand to a sidebar.

Please advise.

vars[n-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;
}

enter image description here

Answer 1

以下是您的代码改进。使用display:inline-block代替float:left并在max-width:100%;height:auto;中使用img，它将完成您想要实现的目标。

＆＃13;

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#wrap {
  font-size: 0 /* fix inline-block gap */
}
.sidebar {
  background: white;
  height: 240px;
  max-width: 240px;
  display: inline-block;
  vertical-align: top;
  padding: 40px 46px 46px;
}
.sidebar-button {
  display: block;
  height: 28px;
  border: #c8c8c8 1px solid;
  border-width: 1px 1px 0;
  padding: 12px 0 0 20px;
  text-decoration: none;
  font-size: 15px;
  color: gray;
}
.sidebar-button:last-of-type {
  border-bottom: #c8c8c8 1px solid;
}
.sidebar-button:hover {
  background-color: #f9f9f9;
  color: black;
  padding-left: 40px;
}
.content {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 223px)
}
.bike-picture img {
  max-width: 100%;
  height: auto;
  display: block;
  border: #c8c8c8 1px solid;
}
.text {
  font-size: 16px
}

＆＃13;

<div id="wrap">
  <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" href="#">Автотовары</a>	
  </div>
  <div class="content">
    <div class="bike-picture">
      <img src="//lorempixel.com/1200/400" alt="Bike">
    </div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus congue ex a imperdiet. Nullam id placerat dolor. Quisque rhoncus dui a magna aliquet tempor. Pellentesque eu magna quis nibh vehicula euismod. Pellentesque vestibulum ut nunc sed
      facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus quis porta neque. Curabitur gravida porta ex, at gravida libero tincidunt nec. Nunc tempor rhoncus bibendum. Pellentesque id tellus
      odio. Praesent ultrices metus a felis sollicitudin vestibulum. In dui nunc, fermentum in magna ut, ullamcorper dapibus turpis. Duis facilisis luctus mi ac semper.</div>
  </div>
</div>

＆＃13;

Answer 2

检查一下：

＆＃13;

.container{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row nowrap; /* Safari 6.1+ */
    flex-flow: row nowrap;

    -webkit-align-items: flex-start; /* Safari 7.0+ */
    align-items: flex-start;
    
    padding: 40px 0 46px 0;
    background-color: white;
    
}
.sidebar {
    height: 240px;
    flex-basis: 240px;
    padding: 0 46px 0 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;
    flex-grow: 1;
    text-align: center;
}

.bike-picture img{
  max-width: 100%;
}

＆＃13;

<div class="container">
<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="bike-picture">
    <img src="http://s12.postimg.org/fpyql332l/felt_bicycles_q26_194648_1.jpg" alt="Bike">
</div>
</div>

＆＃13;

Resizing a picture in <div> next to a sidebar

2 个答案: