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之下没有其他内容，则可以通过向容器div添加overflow: auto来确保最外层的div扩展到它们。这通常被称为“clearfix”。请注意，这是一种黑客攻击，在奇怪的情况下会导致意外结果。如果你想阻止这样的话，我会更多地阅读它。

否则你必须在浮点数下方放置一个空元素，然后在其上放置clear: both。

正如您所看到的，您的选择取决于您对容器div内容的其余部分的确切需求。如果容器div中有任何额外内容，请告诉我，我可以编辑我的答案以应用。

Answer 2

/ Div容器 /

#containerDiv {
    overflow: hidden;
    margin-top: 7px;
    margin-left: 7px;
    margin-right: 7px;
}

/ Div的共享规则 /

.container,#leftDiv,#rightDiv {
    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;
    width: 414px;
}

/ *所有表* /

.container td {     
   padding-right: 10px;     
   text-align: justify; 
}

/ leftDiv特定信息 /

#leftDiv {
    float: left;
    padding: 10px;
}

/ rightDiv特定信息 /

#rightDiv {
    float: right;
    padding: 10px;
}

Answer 3

呸。不要那样做。试试this或this。 Yahoo offers a nice service to help make good layouts：

在div容器中放置两个div？

3 个答案:

更新：使用Flexbox

使用绝对定位

使用浮动