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

默认情况下，Bootstrap列的填充为15px。图像宽度也必须是100％。你可以这样做：

<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：http://jsfiddle.net/HM4gE/1/

我不会使用Bootstrap列来实现这一点，因为你似乎有一些固定的高度和宽度的列。相反，我会这样做（假设图像的高度和宽度始终为196px）：http://jsfiddle.net/HM4gE/2/

在使用之前检查浏览器对calc（）的支持：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/