在div容器中放置两个div？

Question

我怎么能并排两个div？

左边的div必须对齐顶部,左边第二个顶部,右边.两者都必须在容器"内部"并尊重自动增长......

谢谢.

这就是我所做的:

.devCtrl,#leftcolumn,#rightcolumn {
    background: rgba(255, 255, 255, .3);
    border-color: rgba(255, 255, 255, .6);
    border-style: solid;
    border-width: 1px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#leftcolumn {
    display:inline;
    min-height: 400px;
    float: left;
    width: 440px;
}

#rightcolumn {
    width: 440px;
    min-height: 400px;
    float: right;
}

Answer 1

更新:使用Flexbox

这些天我会用flexbox做这件事.它有相当数量的浏览器支持,如果你使用后备(我建议使用autoprefixer)你应该没事.

#containerDiv {
  display: flex;
  justify-content: space-between;
}

就是这样!这将尊重自动增长,更好的是,当容器空间不足时,允许正确的div包装到下一行(你可以防止这种情况flex-wrap: nowrap;).如果你想在列布局中使用更多的div,我也建议你研究一下flex-direction: column;.Flexbox可以做很多其他的事情,比如重新排序div并控制如何对齐这些盒子,所以如果你感兴趣的话我会更多地研究它.

使用绝对定位

#containerDiv {
  position: relative;
}
#leftDiv {
   position: absolute;
   top: 5px;
   left: 5px;
}
#rightDiv {
   position: absolute
   top: 5px;
   right: 5px;
}

唯一的问题是div会忽略#container div中的任何其他内容,你必须为div下面的第一组内容设置一个上边距.这显然不会适应容器div的大小增加

要么

使用浮动

我看到你当前的css中已经有一些浮点数,但我猜你的浮点数溢出你的div或内容有问题.

#leftDiv {
    float: left;
}

#rightDiv {
    float: right;
}

#nextSetOfContent {
    clear: both;
}

容器和所有后续内容都会关注内容的增长.

如果在两个div之下没有其他内容,则可以通过向overflow: auto容器div 添加一个来确保最外面的div扩展到它们.这通常被称为"clearfix".请注意,这是一种黑客攻击,在奇怪的情况下会导致意外结果.如果你想阻止这样的话,我会更多地阅读它.

否则你必须在浮子下面放一个空元素然后clear: both放在它上面.

如您所见,您的选择取决于您对容器div的其余内容的确切需求.如果容器div中有任何额外内容,请告诉我,我可以编辑我的应用答案.