javascript - 将 2 个容器 Div 拆分为 2 列

Question

我试图在“可能已经有您的答案部分”中找到答案，但它们没有用或者不是我要找的东西。我正在尝试将作为容器工作的 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

在你的 #main div CSS 中添加 display:inline-block

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

fiddle :https://jsfiddle.net/h0j88xsx/1/