三个水平子div背景颜色问题答案

【问题标题】：Three horizontal child div background color issue三个水平子div背景颜色问题
【发布时间】：2013-12-06 20:47:36
【问题描述】：

我在父 div 中有 3 个具有不同背景颜色的水平浮动 div。我正在尝试找到将 3 个 div 背景颜色填充到父 div 中的最佳方法，而无需设置 3 个子 div 的确切高度（如果可能的话）。

这是我的风格和代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style type="text/css">
        #packages
        {
            margin: 0 auto;
            padding: 0;
            border: 1px solid rgb(148, 183, 65);
            width: 65%;
            font-size: 70%;
            font-family: Verdana, Geneva, sans-serif;
            text-align: center;
            float: left;
            position: relative;
            overflow: hidden auto;
        }


        .basic
        {
            padding: 1em 0 1em 0;
        }

        .silver
        {
            background-color: #dfedbd;
            max-height: 100%;
            margin: 0;
            padding: 0;
            width: 33.3%;
            max-height: 100%;
            float: left;

        }

            .silver a
            {
                color: rgb(148, 183, 65);
            }

        .gold
        {
            background-color: #bbd57c;
            width: 33.3%;
            float: left;
            margin: 0;
            padding: 0;
        }

            .gold a
            {
                color: rgb(0, 128, 0);
            }


        .platinum
        {
            background-color: #94b741;
            width: 33.3%;
            float: left;
            margin: 0;
            padding: 0;
        }

            .platinum a
            {
                color: rgb(255, 255, 255);
            }

        .exec
        {
            clear: both;
            width: 100%;
            padding: 1em 0 1em 0;
            background-color: #0aa244;
            text-align: center;
            color: rgb(255, 255, 255);
        }

            .exec a
            {
                color: rgb(255, 255, 255);
            }
    </style>

</head>
<body>
    <section id="packages">

        <div class="basic">
            <strong>Basic Listing:</strong> Title, Address, Phone, E-mail to Friend, Add to Favorites - 
            <a title="Sign Up!" href="/free-listing.html"><strong>FREE</strong></a>
        </div>

        <div class="silver">
            <h3><strong>Silver Listing</strong></h3>
            <p>Silver level listings appear in search results above Basic Free listings.&nbsp;</p>
            <p><strong>$200.00 per year</strong></p>
            <p>
                <span>
                    <a title="Select >>" href="#">
                        <span>
                            <strong>SELECT &gt;&gt;</strong>
                        </span>
                    </a>
                </span>
            </p>
        </div>

        <div class="gold">
            <h3><strong>Gold Listing</strong></h3>
            <p>Gold level listings appear in search results above Silver and Basic Free listings.&nbsp;</p>
            <p><strong>$500.00 per year</strong></p>
            <p>
                <a title="Select >>" href="#"><span>
                    <span>
                        <strong>SELECT &gt;&gt;</strong>
                    </span></span></a>
            </p>

        </div>

        <div class="platinum">
            <h3><strong>Platinum Listing</strong></h3>
            <p>Platinum level listings appear in search results above Gold, Silver and Basic Free listings.&nbsp;</p>
            <p>
                <strong>Contains Detail View and Summary View
                </strong>
            </p>
            <p><strong>$1000.00 per yea</strong><strong>r</strong></p>
            <p>
                <span>
                    <a title="SELECT >>" href="#">
                        <span>
                            <span>
                                <strong>SELECT &gt;&gt;</strong></span></span></a></span>
            </p>

        </div>



        <div class="exec">
            <h3><span><strong>Executive Listing:</strong></span></h3>
            <p><span>All Features of the PLATINUM LISTING<strong></strong>, PLUS &nbsp;many extra fields and contact info!</span></p>
            <p><span><strong>$2000.00 per year</strong></span></p>
            <p>
                <span><strong><a title="Select!" href="#">SELECT Listing Type "EXECUTIVE" during Checkout &gt;&gt;</a>
                </strong>
                </span>
            </p>
        </div>


    </section>

【问题讨论】：

标签： html colors background floating

【解决方案1】：

你的意思是 div 的背景颜色并没有完全超出 div 的 .我通常需要在标签中添加一个 clear after floating item 才能显示背景。

将此添加到您的样式表中。

.clear { clear: both; }

然后在结束标记之前添加它。

<div class="clear"></div>

如果我理解正确，应该允许该部分的背景位于所有三个框的后面，无论大小。

【讨论】：

我希望我能附上一张图片。我不需要父 div 的 bg 颜色，而是需要 3 个水平内部浮动 div 来触摸底部全长 div（每个都有不同的颜色）。我正在寻找一种最好的方法来降低 3 而不设置底部边距或 div 高度（除非这是唯一的方法）谢谢