-1

私はこのコード css コードを持っています。別の div 内に HTML (以下) を表示しようとしています

/* EXTENDED FEATURES */
.four-col {
    float:left;
    width:25%;
}
.four-col h3{
    font-size:17px;
}
.four-col ul{
    margin:10px 0 10px -10px;
    list-style-image:url(../images/icon_tick1.png);
}
.four-col li{
    font-weight:bold;
    padding:1px 0;

<div class="four-col">
                            <h3>Account Features</h3>
                            <ul>
                                 <li>Unlimited MySQL 5 Databases</li>
                                 <li>Unlimited FTP Accounts</li>
                                 <li>SSH</li>
                                 <li>PHP 5.3, 5.4 & 5.5</li>
                                 <li>PEAR</li>
                                 <li>Zend Guard Loader</li>
                                 <li>Ioncube Loader</li>
                                 <li>Ruby On Rails</li>
                                 <li>Perl</li>
                                 <li>CGI</li>
                                 <li>Python</li>
                                 <li>Server Side Includes</li>
                                 <li>cURL</li>
                                 <li>GD2</li>
                            </ul>
                        </div><!-- four-col -->
                        <div class="four-col">
                            <ul>
                                 <li>Cron Jobs</li>
                                 <li>ImageMagick</li>
                                 <li>Zend Framework</li>
                                 <li>FFmpeg</li>
                                 <li>Flv2tools</li>
                                 <li>LAME MP3 Encoder</li>
                                 <li>Libogg &#38; Libvorbis</li>
                                 <li>Mplayer &#38; Mencoder</li>
                            </ul>
                            <h3>Control Panel Features</h3>
                            <ul>
                                 <li>Latest cPanel</li>
                                 <li>Softaculous</li>
                                 <li>RVSiteBuilder Pro</li>
                                 <li>R1Soft CDP Backups</li>
                                 <li>CloudFlare CDN Plugin</li>
                                 <li>Custom Error Pages</li>
                        </div><!-- four-col -->
                        <div class="four-col">
                            <ul>
                                 <li>IP Deny Manager</li>
                                 <li>Hotlink Protection</li>
                                 <li>Password Protect Directories</li>
                                 <li>Redirects</li>
                                 <li>phpMyAdmin</li>
                            </ul>
                            <h3>Email Features</h3>
                            <ul>
                                 <li>Unlimited POP3 Accounts</li>
                                 <li>Unlimited Auto Responders</li>
                                 <li>Unlimited E-Mail Forwarders</li>
                                 <li>Web Mail</li>
                                 <li>Mailing Lists</li>
                                 <li>Spam Assassin</li>
                                 <li>SMTP</li>
                                 <li>IMAP</li>
                                 <li>SPF &#38; DomainKeys</li>
                            </ul>
                        </div><!-- four-col -->
                        <div class="four-col">
                            <h3>Domains &#38; IP Addresses</h3>
                            <ul>
                                 <li>Unlimited Sub Domains</li>
                                 <li>Unlimited Add-On Domains</li>
                                 <li>Unlimited Parked Domains</li>
                                 <li>Dedicated IP ($1.95/mo)</li>
                            </ul>
                            <h3>Web Reports &#38; Statistics</h3>
                            <ul>
                                 <li>Awstats</li>
                                 <li>Webalizer</li>
                                 <li>Logaholic</li>
                                 <li>Access Logs</li>
                                 <li>Error Logs</li>
                                 <li>Bandwidth Usage</li>
                                 <li>Diskspace Usage</li>
                            </ul>
                        </div><!-- four-col -->

しかし、外側のdivは正しい高さを表示していません-これは境界線があるため表示されています

ここに完全なコードのフィドルがあります：http://jsfiddle.net/LwPMN/

div内にdivfour-colを表示したいweb_hosting_extended_features

4

6 に答える 6

1

この CSS コードをスタイルに追加します

#web_hosting_extended_features-1{

オーバーフロー: 非表示; }

将来の参考のために CSS Clearfix も調べてください http://www.webtoolkit.info/css-clearfix.html

于 2013-10-07T19:15:12.050 に答える
1

要素に追加overflow: hiddenするだけです：.tabcontent

.tabcontent {
    /* other CSS untouched */        
    overflow: hidden;
}

JS フィドルのデモ。

clear: bothまたは、同じ要素の終了タグの前に要素を追加することもできます(この場合は を使用しましたbrが、どの要素でも構いません)。

<div class="tabcontent" id="web_hosting_extended_features-1">
    <!-- all content removed -->
        <br />
    <!-- four-col -->
</div>

br {
    clear: both;
}

JS フィドルのデモ。

于 2013-10-07T18:50:21.293 に答える
0

さて、フロートを使用しています。フロートをクリアするかoverflow: auto;、outter div ( .tabcontent)に設定する「新しい方法」を使用する必要があります。

于 2013-10-07T19:05:02.347 に答える