我试图在“可能已经有您的答案部分”中找到答案,但它们没有用或者不是我要找的东西。我正在尝试将作为容器工作的 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);
最佳答案
在你的 #main div
CSS 中添加 display:inline-block
#main div {
display: inline-block;
vertical-align: top;
width: 400px;
}
fiddle :https://jsfiddle.net/h0j88xsx/1/
关于javascript - 将 2 个容器 Div 拆分为 2 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34790646/