Question

我已从

下载了Jquery UI Tabs Widget

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

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

<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

如果我真的需要使用float for div并对齐图像，我怎么能摆脱这个问题呢？感谢。

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

Answer 1

尝试将float（和width）添加到“main div”。

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

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

在Jquery UI Tabs插件中定位div和图像的问题

1 个答案: