Jquery UI标签插件中div和图像的定位问题

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>

CSS for red_div:

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

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

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

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

#red_div {
    ...
    float: left;
}

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

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

我怎么能摆脱这个问题，如果我真的需要使用浮动div和对齐图像?谢谢。

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

Answer 1

尝试为"maindiv"添加float(和width)。

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

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