-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/

我希望four-coldiv 显示在web_hosting_extended_featuresdiv内

4

6 回答 6

1

只需添加overflow: hidden到.tabcontent元素：

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

JS 小提琴演示。

或者您可以clear: both在同一元素的结束标记之前添加一个元素（在这种情况下，我使用了 a 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 回答
1

clear:both;毕竟四列 div使用另一个 div 。这是更新的小提琴。它是必需的，因为您的四列有float:left;.

于 2013-10-07T18:53:51.447 回答
1

将此 CSS 代码添加到您的样式中

#web_hosting_extended_features-1{

溢出：隐藏；}

还要查看 CSS Clearfix 以供将来参考http://www.webtoolkit.info/css-clearfix.html

于 2013-10-07T19:15:12.050 回答
0

这是 clearfix css 修复

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /* IE < 8 */
}

http://jsfiddle.net/LwPMN/6/

于 2013-10-07T18:55:01.553 回答
0

添加“溢出：隐藏；” 到这些 CSS 规则之一。

div#web_hosting_extended_features-1{
    overflow: hidden;
}
.tabcontent{
    overflow: hidden;
}
于 2013-10-07T19:04:05.343 回答
0

好吧，您正在使用浮点数。您要么需要清除浮动，要么采用“新方式”，即设置overflow: auto;为外部 div ( .tabcontent)

于 2013-10-07T19:05:02.347 回答