0

私は公式に困惑しています。これには明らかに簡単な解決策がありますが、たぶん私はそれを見ることができません。

div基本的に、2つのメインs(<code> leftSideとrightside—をインラインで表示したい)を持つコンテンツdivがあります。それぞれの側には他divのが含まれています。私が何をしようとしても、rightSide div常に下に表示することに頼っていleftSide divます。

HTML

 <div id="leftSide">
        <h6>MERCHANDISE</h6><a href="http://organthieves.spreadshirt.com" target="_blank"><img src="images/merch.gif" height="220" width="330" border="0" alt="Organ Thieves - Merch Slideshow"/></a>
        <div id="twitter">
        <div class=hr></div>
        <h6>FOLLOW US</h6>
            <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
                <script>
                new TWTR.Widget({
                version: 2,
                type: 'profile',
                rpp: 4,
                interval: 30000,
                width: 330,
                height: 250,
                theme: {
                shell: {
                background: '#525252',
                color: '#ffffff'
                },
                tweets: {
                background: '#000000',
                color: '#ffffff',
                links: '#b51d1d'
                }
                },
                features: {
                scrollbar: false,
                loop: false,
                live: false,
                behavior: 'all'
                }
                }).render().setUser('OrganThieves').start();
                </script>
        </div><!--end of twitter-->
    </div><!--endof leftside-->

  <div id="rightSide">
        <div id="gigs">
             <script type="text/javascript">
             var bcGigWidgetWidth=500;
             var bcGigWidgetMaxHeight=500;
             var bcGigWidgetBackgroundColor="333333";
             var bcGigWidgetTextColor="ffffff";
             var bcGigWidgetLinkColor="eaeaea";
             var bcGigWidgetLineColor="7d7058";
             </script>
             <script type="text/javascript" src="http://organthieves.bandcentral.com/javascripts/giglistings.js"></script>
             <script type="text/javascript" src="http://organthieves.bandcentral.com/gigs/export.js"></script>
      </div><!--end gigs-->
    </div><!--end of rightSide-->
  </div><!--end content-->

CSS

#content{
    position: relative;
    width: 900px;
}

#leftSide{
    width: 330px;
    position: relative;
}
#twitter{
    position: relative;
    width:330px;
}
#rightSide{
    position: relative;
    width: 570px;
    background-color: #339;
    height:400px;
    display: inline;    
}
#gigs{
    float: right;
    width: 500px;
    position: relative;
}
4

2 に答える 2

3

#leftSideまた、親要素が両方に対して十分に広い#rightSideことfloat:left;を確認してください。

于 2012-04-14T18:35:28.503 に答える
0

ここでコードを確認してください。floatの左右を使用してdivを水平に配置できます。

http://jsfiddle.net/SfHrb/

于 2012-04-14T18:51:54.590 に答える