이미지의 오른쪽에 2 개의 컨테이너가 있습니다.

Question

검색 결과 상자에 다음 레이아웃을 적용하려고합니다. 특히 오른쪽의 100 % 너비 및 높이 이미지에는 이미지의 높이와 동일한 두 개의 스택 컨테이너가 있으며 각 컨테이너에는 서로 다른 배경색이 사용되며 이미지에 대해 바로 맞 닿아 있습니다. 이 간단한 레이아웃을 달성하기 위해

모든 시도는 비참하게 실패하고 있습니다. 내가 타격 계속 문제가있는 경우 같은 것을 사용 :

<div class="search-result-box"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <img src="" class="img-responsive" style="height: 196px;" height="196"> 
     </div> 

     <div class="col-md-9"> 
      ... 
     </div> 
    </div> 
</div> 

는 이미지가 상당히 완전히 COL-MD-3 열을 기입하지 않으며, 따라서 당신이 칼럼의 배경을 참조하십시오.

이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

Answer 1

부트 스트랩 열의 패딩은 기본적으로 15px입니다. 또한 이미지 너비는 100 %이어야합니다. 당신이 열위한 몇 가지 고정 된 높이와 폭을 갖고있는 것 같다 있기 때문에 이것을 달성하기 위해 비록 내가 부트 스트랩 열을 사용하지 않을 http://jsfiddle.net/HM4gE/1/

:

<div class="search-result-box"> 
    <div class="row"> 
    <div class="col-md-3" style="padding: 0;"> 
     <img src="" class="img-responsive" style="width: 100%;"> 
    </div> 

    <div class="col-md-9"> 
     ... 
    </div> 
    </div> 
</div> 

Jsfiddle : 당신이 뭔가를 할 수 있습니다. 대신 나는 이런 식으로 할 것 (높이와 이미지의 너비가 항상 196px입니다 주어진) : CALC (대한 http://jsfiddle.net/HM4gE/2/

확인 브라우저 지원)를 사용하기 전에 : 여기 http://caniuse.com/calc

Answer 2

가능한 대답 :

<div class="search-result-box"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <img src="" class="img-responsive" style="height: 196px;" height="196" /> 
     </div> 
     <div class="col-md-9"> 
      <div class="title">Title</div> 
      <div>Link1</div> 
     </div> 
    </div> 
</div> 

.search-result-box { 
    display: table; 
    width: 100%; 
} 

.row { 
    display: table-row; 
} 

.row > * { 
    display: table-cell; 
} 

.col-md-3 { 
    background: orange; 
    width: 260px; 
    height: 196px; 
} 

.col-md-9 { 
    vertical-align:top; 
    background: grey; 
} 

.title { 
    background: #ccc; 
    width: 100%; 
    height: 150px; 
} 

http://jsfiddle.net/junkie/fAPQ6/2/