将divs并排和居中对齐

Question

我有3个div。 1是容器，我希望那些其他两个在中心并排宽度相同的宽度对齐。但它看起来像

我希望它像

一样对齐

这是我的代码：

HTML：

<div id="bottom-content">
   <div id="left-desc">

   </div>
   <div id="description-space">

   </div>
</div>

CSS：

#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;
}

Answer 1

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

table元素不会填充其容器的宽度，因此也要给它width:100%（或任何你想要的宽度）。您应该更改容器的box-sizing属性，使宽度包含边框。

#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;
}

JSFiddle

Answer 2

#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;
}

这里是Fiddle