Html 并排对齐div并居中对齐

我有三个div。1是容器，我希望其他两个在中心并排对齐，宽度相同。但看起来是这样的

我希望它像这样对齐

这是我的密码：

HTML:

---

删除浮动样式并将元素显示为表格/表格单元格

table元素无法填充其容器的宽度，因此也要为其指定宽度：100%或您想要的任何宽度。您应该更改容器的“框大小”属性，使其宽度包括边框

#bottom-content{
    border: 1px solid red;
    box-sizing:border-box;
    display:table;
    width:100%;
    overflow: hidden;
    text-align: left;

}
#left-desc{
    border: 1px solid yellow;
    display:table-cell;
    width: 50%;
    overflow: hidden;
}
#description-space{
    border: 1px solid black;
    display:table-cell;
    width: 50%;
    overflow: hidden;
}

---

这里有一个

您需要添加框大小：边框框到内部div，宽度添加了填充和边框，因此div超过50%，这就是为什么它们不相邻的原因使用框大小更好here@Mr.Alien我在编辑，做了一些修改。此外，我还从问题中假设任意一个元素的高度都应该与容器的高度相匹配，这就是我选择显示：表格单元格方法的原因。这件事做得更好，因为我还有另外一件事要做。非常感谢。

#bottom-content{
    border: 1px solid black;
    overflow: hidden;
    text-align: left;
}
#left-desc{
    border: 1px solid orane;
    float: left;
    width: 50%;
    overflow: hidden;
}
#description-space{
    border: 1px solid orange;
    float: right;
    width: 50%;
    overflow: hidden;
}

#bottom-content{
    border: 1px solid red;
    box-sizing:border-box;
    display:table;
    width:100%;
    overflow: hidden;
    text-align: left;

}
#left-desc{
    border: 1px solid yellow;
    display:table-cell;
    width: 50%;
    overflow: hidden;
}
#description-space{
    border: 1px solid black;
    display:table-cell;
    width: 50%;
    overflow: hidden;
}

#bottom-content{
    border: 1px solid black;
    overflow: hidden;
    text-align: left;
}
#left-desc, #description-space { /* add this block */
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 400px; /* for demonstration purposes */
}
#left-desc{
    border: 1px solid orane;
    float: left;
    width: 50%;
    overflow: hidden;
}
#description-space{
    border: 1px solid orange;
    float: right;
    width: 50%;
    overflow: hidden;
}