Question

我在父div中有3个不同背景颜色的水平浮动div。我试图找到最好的方法让父div中的3 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>

Answer 1

你的意思是它的背景颜色不会一直超过div。我通常需要在标记中添加一个明确的浮动项后才能显示背景。

将其添加到样式表中。

.clear { clear: both; }

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

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

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

三个水平的儿童div背景颜色问题

1 个答案: