将2个容器分成2列

Question

我试图在＆＃34中找到答案;可能已经有了你的答案部分＆＃34;但他们没有工作或者不是我想要的。我试图将2个主要Div作为容器分成2列（不同宽度）。但他们不会动。

从这里得到了这个想法，并尝试对其进行调整：http://jsfiddle.net/UrVsR/

我试图做的就是这样......

+1评论中的链接，因为我无法发布超过2个

这是我的HTML

<div id="page">
  <div id="name"></div>
  <div id="main">
    <div class="leftcolumn"> <-- Container Div
      <div id="cover"></div>
      <div id="info">
        <div class="header"></div>
        <div class="body"></div>
      </div>
    </div>
    <div class="rightcolumn"> <-- Container Div
      <div id="synopsis">
        <div class="header"></div>
        <div class="body"></div>
      </div>
      <div id="related">
        <div class="header"></div>
        <div class="body"></div>
      </div>
      <div id="review">
        <div class="header"></div>
        <div class="body"></div>
      </div>
      <div id="whatever">
        <div class="header"></div>
        <div class="body"></div>
      </div>
    </div>
  </div>
</div>

我知道容器是显而易见的，以防万一我表达的不好

这是我的CSS

.column {
 float: left;
}
.left { 
}
.right { 
}
#main {
 width: 1000px;
 padding: 8px;
}
#main div {
 width: 400px;
}

var left = $("<div/>").addClass("column").addClass("left");
var right = $("<div/>").addClass("column").addClass("right");

var lElems = $("#main .leftcolumn");
var rElems = $("#main .rightcolumn");

lElems.appendTo(left);
rElems.appendTo(right);

$("#main").append(left,right);

Answer 1

在display:inline-block css

中添加#main div

#main div {
  display: inline-block;
  vertical-align: top;
  width: 400px;
}

小提琴：https://jsfiddle.net/h0j88xsx/1/