1

我已经从

http://jqueryui.com/tabs/

当我使用下一个代码时，一切都很完美：

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
  </ul>
  <div id="tab1">
      <div id="red_div"></div>
  </div>
  <div id="tab2">
    <img src="img_path_here.jpg" />
    Image Test
  </div>
  <div id="tab3">
        Tab 3
  </div>
  <div id="tab4">
    Tab 4
  </div>
</div>
<script type="text/javascript">
            $(document).ready(function(){
                $(function() {
                  $( "#tabs" ).tabs();
                });
            });
</script>

red_div 的 CSS：

#red_div {
    width: 300px;
    height: 300px;
    background-color: red;
}

但是当我为图像添加对齐属性时，比如

<img src="img_path_here.jpg" align="left" />

或者当我为 div#red_div 添加 float 属性时

#red_div {
    ...
    float: left;
}

我有定位问题。他们不在这个地方，他们应该在。他们越过了底线。图片将更好地描述这一点。

http://i.stack.imgur.com/efFnK.jpg
http://i.stack.imgur.com/MLWJu.jpg

如果我真的需要对 div 使用 float 并为图像使用 align，我该如何摆脱这个问题？谢谢。

更新： 我在 JSFiddle 上发布了这个问题：http: //jsfiddle.net/q6F7r/

4

1 回答 1

2

尝试将浮动（和宽度）添加到“主 div”。

.ui-tabs {float:left; width:100%;}

http://jsfiddle.net/q6F7r/6/

于 2013-04-02T14:12:03.670 回答