0

テキストに合わせて本体の div のサイズが変更されません。

私のセットアップは、本体コンテナ div です。その div には、header div、body div、および footer div があります。body div には、body-left、body-middle、body-right という 3 つの div があります。これらはすべて CSS スタイルの float:left を使用して並べて表示されます

bodycontainer の高さ、bodycontainer の min-height、および bodycontainer の div についても同じ設定を試みました。

ここに何が起こっているかのスクリーンショットがあります: http://i.imgur.com/6dYRf.jpg

これが私のhtmlです：

<div id="maincontainer">
<div id="headercontainer">
    <a href="/index.html"><div id="header-logo"></div></a>
    <div id="header-navbar">
        <div id="navbar" align="center">
            <a href=""><div>Home</div></a>
            <a href=""><div>Roster</div></a>
            <a href=""><div>FAQ</div></a>
            <a href=""><div>Donate</div></a>
            <a href=""><div>About</div></a>
            <a href=""><div>Contact</div></a>
        </div>
    </div>
</div>
<div id="bodycontainer">
    <div id="body-left">
        <ul>
            <div>
                <a href="http://www.facebook.com/darkonyxftw" title="Click to go to our Facebook page." target="_blank">
                                    <div class="social-odd">
                                    <h3 class="social">Facebook</h3>
                                    <p class="social">All tweets and youtube uploads, as well as updates and notifications go on our facebook. Like our page to get the notifications on your wall.
                                </p>
                                <p class="social">facebook.com/DarkOnyxFTW</p>
                            </div>
                        </a>
                        <a href="http://www.youtube.com/subscription_center?add_user=darkonyxftw" title="Click to subscribe to our Youtube channel." target="_blank">
                                    <div class="social-even">
                                    <h3 class="social">Youtube</h3>
                                    <p class="social">Entire practice sessions, special event videos, VODS and casts get uploaded to our youtube channel. click here to subscribe.
                                </p>
                                <p class="social">youtube.com/DarkOnyxFTW</p>
                            </div>
                      </a>
                      <a href="http://www.twitter.com/DarkOnyxFTW" title="Click to go to our twitter page." target="_blank">
                                    <div class="social-odd">
                                    <h3 class="social">Twitter</h3>
                                    <p class="social">Everytime we upload a youtube video or our stream goes online on twitch.tv/DarkOnyxFTW, you will know about it if you follow our twitter account.
                                </p>
                                <p class="social">twitter.com/DarkOnyxFTW</p>
                            </div>
                        </a>
                        <a href="http://www.twitch.tv/DarkOnyxFTW" title="Click to go to our twitch.tv channel." target="_blank">
                                    <div class="social-even">
                                    <h3 class="social">Live Stream<br>@ Twitch.tv</h3>
                                    <p class="social">We live stream our practices every Monday, Wednesday and Thursday at 7PM PST (9PM Central). Follow our twitch channel to get an email notification when we go live. We will also be streaming clan battles and other special events, so keep an eye on your inbox for that.
                                </p>
                                <p class="social">twitch.tv/DarkOnyxFTW</p>
                            </div>
                        </a>
                        <a href="http://www.teamliquid.net/blog/DarkOnyx" title="Our TeamLiquid Blog" target="_blank">
                                    <div class="social-odd">
                                    <h3 class="social">Team Liquid Blog</h3>
                                    <p class="social">Click here for player interviews, clan war information and much more.
                                </p>
                                <p class="social">teamliquid.net/blog/DarkOnyx</p>
                            </div>
                        </a>
                    </div>
                </ul>
    </div>
    <div id="body-middle">

    </div>
    <div id="body-right">

    </div>
</div>
<div id="footercontainer">
    <div style="width:590px; padding-left:10px; padding-top:10px;">Site by Alex "Xzar" Mohr</div>
    <div id="footer-nav" style="" align="right">
        <ul>
            <li><a href="/about/about.html">About</a></li> | 
            <li><a href="/contact/contact.html">Contact</a></li>
        </ul>
    </div>
</div>

ここに私のcssがあります：http://darkonyx.webatu.com/style2.css

4

1 に答える 1

0 
#bodycontainer{
    width:100%;
    height:1000px;
    background: rgba(0,0,0,0.9);
}

これにより、高さが 1000px に制限され、テキストの長さよりも短くなります。

于 2012-11-24T02:04:28.420 に答える