0

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

问题： 一旦我添加div.ui-widget-header，Divs 就会出现在彼此的顶部，我希望 divs 并排放置，以便两者ui-widget-header以 50% 的宽度无缝合并。如果我将两者的宽度都更改为 49%，那么它可以工作，但是两个ui-widget-headers 都有差距。

JSFIDDLE：http: //jsfiddle.net/babbalcksheep/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}
4

2 回答 2

0

很简单，只需删除最后一个元素的边框

请参阅此FIDDLE了解您的结果。

.container-div1,
.container-div2 {
  padding: 0;
  margin: 0;
  float:left;
  border : none;
}

这是css更改 其他都一样

于 2013-10-29T09:17:33.853 回答
0

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

尝试穿上border: none;两者，您应该会看到它们彼此相邻。

于 2013-10-29T07:58:34.200 回答