如何使用内联块并排制作两个div？

Question

如何将div并排放置,其中一个div('contentwrapper')响应浏览器的大小调整.

HMTL

<div id="maincontainer">
<div id="leftcolumn">&nbsp;</div>

<div id="contentwrapper">&nbsp;</div>
</div>

CSS

#maincontainer {
    width:100%;
    height: 100%;
}

#leftcolumn {
    display:inline-block;
    width: 100px;
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;
    width:100%;
    height: 100%;
    background-color: red;
}

JSFIDDLE http://jsfiddle.net/A5HM7/

Answer 1

<style>
  #maincontainer {
    width:100%;
    height: 100%;
  }

  #leftcolumn {
    float:left;
    display:inline-block;
    width: 100px;
    height: 100%;
    background: blue;
  }

  #contentwrapper {
    float:left;
    display:inline-block;
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
    height: 100%;
    background-color: red;
  }
</style>

Answer 2

好的，所以我认为这将是您最快的解决方案。您已经有一个不错的html结构，但我将为您进一步缩小范围。这是JsFiddle。

使用您的代码：

#maincontainer {
    width:100%;
    height: 100%;
}

我做了一个小的调整，如下所示：

#maincontainer {
    width:100%;
    height: 100%;
    display:inline-block;//added this
}

然后我还重组了另外两个东西，例如：

#leftcolumn {
    float:left;//added this
    width: 100px;
    height:100%;
    background: blue;
}
#contentwrapper {
    float:right;//added this
    width:100%;
    height: 100%;
    background-color: red;
}

现在，在此JsFiddle中，我已经适当地创建了一个特定的宽度，因此您可以随时更改它。请记住，如果使用100％作为宽度，并尝试在同一行中粘贴其他内容，它将自动创建两行，如下所示：

#leftcolumn {
    display:inline-block;<-- changed this above.
    width: 100px;<----This won't work with the below
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;<---- changed this above.
    width:100%;<---- This won't work with the above
    height: 100%;
    background-color: red;
}

但是，如果您将其重组为如下所示：

#leftcolumn {
    display:inline-block;
    width: 10%;<---This will work with the below
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;
    width:90%;<---This will work with the above.
    height: 100%;
    background-color: red;
}

需要注意的几件事，我确实在JsFiddle中增加了一个高度，以便可以看到实际的尺寸，并且出于确切的原因我也增加了宽度。需要注意的是可以真正帮助实现的东西，而基本的“为什么要这样做”就是这个。

如果某些内容对您不起作用，请在下面评论：）