html - 适合空间的第二个 div

Question

我有 2 个 div

• 左侧的 1 区
• 右侧的 Div 2 填充 Div 1 左侧的空间
• 彼此之间应该有 100px 的空间。

margin-left: 100px;如果我无法使用on插入彼此之间的空格，则会出现问题d3。我怎样才能做到这一点？

REF：两个并排的 div：第一个固定宽度，第二个拉伸以适应

谢谢

CSS

   #d1 {
      display: table;
      width: 100%;
    }

    #d2, #d3 {
      display: table-cell;
      padding: 2px 6px;
    }

    #d2 {
      background-color: #eee;
      white-space: nowrap;
      border: 1px solid green;
    }

    #d3 {
      background-color: #ccc;
      margin-left: 100px; /* This doesn't work*/
      width: 100%;
      border: 1px solid blue;
    }

HTML

   <div id="d1">
        <div id="d2">This is a content</div>
        <div id="d3">stretching</div>
    </div>

Answer 1

使用不影响保证金display: table-cell;

检查文档

因此，如果您可以border-collapse:separate在父 div 中使用 div 有display: table;

检查演示 -jsfiddle

Answer 2

Try this demo. I was able to get the 100px margin between the two divs. I put it on the right of the div d2 but you could probably put it on d3. I also gave d2 a max-width of 100% but still trying to figure out d3