0

jQuery UI クラスを使用して、幅が 50% の 2 つのフローティング div を保持するマスター 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}
4

2 に答える 2

0

これに境界があるdiv2ため、不均一になります。それらは50/50である必要がありますが、境界線が1pxであるため、50/50.01（またはそのようなもの）になるため、divが収まらず、他の下に移動します。

両方を装着してみてくださいborder: none;。隣同士に座っていることがわかります。

于 2013-10-29T07:58:34.200 に答える