文章/答案/技术大牛

发布

社区首页 >问答首页 >将2个容器Div拆分为2列

问将2个容器Div拆分为2列
EN

Stack Overflow用户

提问于 2016-01-14 13:18:27

回答 1查看 776关注 0票数 0

我试着在“可能已经有你的答案”部分找到答案，但它们没有起作用，或者不是我想要的。我试图将两个主分区分割成两个列(不同的宽度)作为容器。但他们不肯动。

从这里得到了这个想法，并试图改变它：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);

css

javascript

jquery

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-01-14 13:45:41

在display:inline-block css中添加#main div

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

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

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34790646

复制

相似问题

问将2个容器Div拆分为2列
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将2个容器Div拆分为2列EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将2个容器Div拆分为2列
EN