jquery - css:使用 jQuery UI 类居中 2 个 float div

Question

我正在使用 jQuery UI 类创建一个主 Div，其中包含 2 个宽度应为 50% 的 float div。

问题:只要我添加 div.ui-widget-header ，div 就会出现在彼此之上，我希望 div 并排所以两者 ui-widget-header以 50% 宽度无缝合并。如果我将两者的宽度都更改为 49%，那么它就可以工作，但是两个 ui-widget-header 都有间隙。

JSFIDDLE: http://jsfiddle.net/bababalcksheep/jsR96/

HTML:

<div class="container ui-helper-clearfix ui-widget ui-widget-content">
<div class="ui-widget-content container-div1" style="width: 50%;">
    <div class="ui-widget-header ui-helper-clearfix">
        header1
    </div>  
    Div 1 text
 </div> 
<div class="ui-widget-content container-div2" style="width: 50%;">
    <div class="ui-widget-header ui-helper-clearfix">
        header2
    </div>
    Div 2 text
 </div>  
</div>

CSS:

.container{font-size:.8em;width:100%!important;text-align:center;margin:0 auto;padding:0}
.container .ui-widget-header{border:none;font-size:11px}
.container-div1{float:left;border:none;margin:0;padding:0}
.container-div2{float:left;border-top:none;border-bottom:none;border-right:none;margin:0;padding:0}

Answer 1

由于 div2 上有边框，因此它会变得不均匀。它们应该是 50/50，但由于边界是 1px，它使它成为 50/50.01(或类似的东西)，这迫使 div 不适合并在另一个下移动。

尝试将 border: none; 放在两者上，您应该会看到它们并排放置。