在内联块布局中着色“空白区域”

Question

我有一个简单的两列inline-block基于布局，包含一系列看起来像这样的块：

.doc {
  display: inline-block;
  margin-right: 5em;
  width: 30%;
}
.code {
  display: inline-block;
}

<div class="outer">

  <div class="doc">
    Documentation goes here.
  </div>

  <div class="code">
    <pre><code>
      int main () {
        printf("The code goes here.\n");
      }
      </code></pre>
  </div>

</div>

我希望右边的“列”有一个background-color，所以我 天真地试过这个：

.code {
  display: inline-block;
  background-color: #e0e0e0;
}

但这提出了几个问题：

1. background-color仅适用于行中的行长度 <pre>块，留下一个粗糙的右边缘。

   如果我在width列上指定绝对class="code"，我可以解决此特定问题，如下所示：

.code {
  display: inline-block;
  background-color: #e0e0e0;
  width: 5in;
}

但我不想要绝对width。我试过width: 100%   （我的意思是“包含元素的width”，但那   没有效果。

1. background-color 未应用于发生的“空白空间” 当左<div>（class="doc"）比右边长时 <div>。

   我不知道如何解决这个问题。

如何在这两个示例中获得“空白空间”以获得 纠正background-color？

Here是一个jsfiddle。

Answer 1

在可靠的跨浏览器工作方式（在较旧版本的IE上）是使用Javascript。创建一个在文档就绪时运行的函数，然后在调整屏幕宽度时调整。该函数需要重置两列的高度，测量两者的高度，然后设置列最高的高度。

    mView = view;

通过在setTimeout中放入adjustColumnHeight（）来去抖动resize（）可能是一个好主意，所以它不经常执行。

Answer 2

选项＃1（适用于现代浏览器）

• 使用flexbox

＆＃13;

＆＃13;

.outer {
  display: flex;
  margin:10px 0
}
.doc {
  margin-right: 5em;
  width: 30%;
}
.code {
  background-color: red;
  flex:1
}

＆＃13;

<div class="outer">

  <div class="doc">
    <p>
      Documentation goes here.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis rutrum leo, interdum rutrum dui consectetur eget. Sed sed odio pellentesque, efficitur enim a, ornare odio. Pellentesque semper metus vel ligula tristique, eu suscipit odio porta. Pellentesque
      sagittis nunc sapien, non finibus elit congue ullamcorper. Duis et vulputate sem. Suspendisse dictum egestas sapien, vitae bibendum felis aliquet et. In a augue facilisis, luctus sem ut, auctor nulla. Nullam eget libero in mauris blandit pretium.
      Sed sed porta nunc. Etiam faucibus sed nisl eu suscipit. Phasellus scelerisque in purus in convallis. Donec sed sem ipsum. Nulla ultricies tempus quam, a faucibus quam tincidunt ac. Etiam et purus ultricies, pretium justo vehicula, venenatis risus.
      Vivamus purus dui, auctor id posuere in, dapibus convallis lorem.</p>
  </div>

  <div class="code">
    <pre><code>
  int main () {
    printf("The code goes here.\n");
  }
  
  // here is
  // some other code
  </code></pre>
  </div>

</div>
<div class="outer">

  <div class="doc">
    Documentation goes here.
  </div>

  <div class="code">
    <pre><code>
  int main () {
    printf("The code goes here.\n");
  }
  </code></pre>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

选项＃2（适用于旧浏览器）

• 使用table/table-cell

＆＃13;

＆＃13;

.outer {
  display: table;
  margin:10px 0
}
.doc {
  padding-right: 5em;
  width: 30%;
  display: table-cell
}
.code {
  background-color: red;
  display: table-cell
}

＆＃13;

<div class="outer">

  <div class="doc">
    <p>
      Documentation goes here.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis rutrum leo, interdum rutrum dui consectetur eget. Sed sed odio pellentesque, efficitur enim a, ornare odio. Pellentesque semper metus vel ligula tristique, eu suscipit odio porta. Pellentesque
      sagittis nunc sapien, non finibus elit congue ullamcorper. Duis et vulputate sem. Suspendisse dictum egestas sapien, vitae bibendum felis aliquet et. In a augue facilisis, luctus sem ut, auctor nulla. Nullam eget libero in mauris blandit pretium.
      Sed sed porta nunc. Etiam faucibus sed nisl eu suscipit. Phasellus scelerisque in purus in convallis. Donec sed sem ipsum. Nulla ultricies tempus quam, a faucibus quam tincidunt ac. Etiam et purus ultricies, pretium justo vehicula, venenatis risus.
      Vivamus purus dui, auctor id posuere in, dapibus convallis lorem.</p>
  </div>

  <div class="code">
    <pre><code>
  int main () {
    printf("The code goes here.\n");
  }
  
  // here is
  // some other code
  </code></pre>
  </div>

</div>
<div class="outer">

  <div class="doc">
    Documentation goes here.
  </div>

  <div class="code">
    <pre><code>
  int main () {
    printf("The code goes here.\n");
  }
  </code></pre>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;