Question

我有这个代码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-col div显示在web_hosting_extended_features div

中

Answer 1

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

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

JS Fiddle demo

或者您可以在同一元素的结束标记之前添加clear: both元素（在本例中我使用了br，但任何元素都可以）：

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

br {
    clear: both;
}

JS Fiddle demo

Answer 2

在所有四列div之后使用另一个带clear:both;的div。这是更新的fiddle。这是必要的，因为你的四列有float:left;。

Answer 3

将此CSS代码添加到样式

#web_hosting_extended_features-1{

溢出：隐藏; }

另请参阅CSS Clearfix以供将来参考http://www.webtoolkit.info/css-clearfix.html

Answer 4

这是clearfix css fix

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

.clearfix:after {
    clear: both;
}

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

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

Answer 5

添加＆＃34;溢出：隐藏;＆＃34;其中一个CSS规则。

div#web_hosting_extended_features-1{
    overflow: hidden;
}
.tabcontent{
    overflow: hidden;
}

Answer 6

嗯，你正在使用花车。您需要清除浮动，或使用“新方法”，即将overflow: auto;设置为您的外部div（.tabcontent）

ul / li项目在div中无法正确显示

6 个答案: