1

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

しかし、画像の整列属性を追加すると、

<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 を使用し、image に 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 に答える