2016-04-01 3 views
0

У меня есть эта демонстрация: https://jsfiddle.net/DTcHh/18752/ Я хочу, чтобы высота изображения основывалась на правой стороне, чтобы изображение всегда доходило до конца div. Любое предложение?Как растянуть изображение на правой стороне?

<div class="blog_list"> 
    <div class="row"> 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
      <div class="blog_image"> 
       <img src="img/property_img.png" /> 
      </div> 
     </div> 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
      <div class="blog_details"> 
       <div class="blog_title">This comfortable apartment is located in the heart of Zurich</div> 
       <div class="blog_posted">POSTED ON: <span>JANUARY 24 2016 14:35h </span>IN <span>KREIS 1</span></div> 
        <p class="blog_more-details"> 
        Wheather a single room studio or multi-room apartment, each has at least one own bathroom and a fully quipped kitches. 
        </p> 
       <div class="sold_by"> 
        <div class="row"> 
         <div class="col-md-12 col-sm-12"> 
          <div class="row"> 
           <div class="col-md-2 col-sm-2 col-xs-12 "> 
            <div class="profile-image"><img src="img/profile.png" /></div> 
         </div> 
        <div class="col-md-10 col-sm-10 col-xs-12 no-padding-left"> 
        <span class="property">ARTICLE WRITEN BY</span> 
        <span class="property_name">Janine Lindenmuller</span> 
        <div class="blog_read_more"> 
        <a href="#">READ MORE</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div></div></div></div></div></div> 
+0

Ого, сколько дивы можно использовать один .../оффтоп – LinkinTED

ответ

0

я думаю, что и нужно удалить класс начальной загрузки сетки и должны написать некоторые пользовательские CSS с display:table-cell

, например

.img,.text { 
    display: table-cell; 
    vertical-align: top; 
} 
.img { 
    width:60%; 
} 
.text { 
    width:40%; 
} 

также использовать низкий размер изображения. Fiddle here

0

Установите строку изображения, как это:

JSFiddle

<div class="col-md-12 col-sm-12 col-xs-12"> 
Смежные вопросы