高精度，白天重叠

Question

我不确定为什么这些div重叠..我有一个div元素pricecontainer里面的定价div div Start with your personalized quote here的绿色背景是'underlapping'。

它应该看起来像这样，但价格容器高于它。

这是CSS：

<!--
Styling for the pricing info box
-->

* {
    box-sizing: border-box;
}

/* Create three columns of equal width */
.pricecontainer .columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

/* Style the list */
.pricecontainer .price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

/* Add shadows on hover */
.pricecontainer .price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.pricecontainer .price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

/* List items */
.pricecontainer .price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

/* Grey list item */
.pricecontainer .price .grey {
    background-color: #eee;
    font-size: 20px;
}

/* The "Sign Up" button */
.pricecontainer.info {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
    .pricecontainer .columns {
        width: 100%;
    }
}

<!--
End of styling for pricing info box
-->

.quote {
    margin-top: 100px;
    width: 100%;
}

.quoteheader {
    font-size: 30px;
    font-color: white;
    background-color: #00A63F;
    color: white;
    text-align: center;
}

.quotebody {
    margin-top: 5vh !important;
    width: 50%;
    margin: 0 auto;
}

.button {
    text-align: center;
}

这是适当的HTML代码：

<div class="pricecontainer">
        <div class="columns">
            <ul class="price">
                <li class="header">Blogs</li>
                <li class="grey">$ 74.99</li>
                <li>One page designed just for a blog.</li>
                <li>Simple admin page to update blog.</li>
                <li>Register and Login page to give access to post updates on blog.</li>
                <li>Pick the colors you want us to design with.</li>
                <li>+ More</li>
                <li class="grey"><a href="#" class="info">Sign Up</a></li>
            </ul>
        </div>

        <div class="columns">
            <ul class="price">
                <li class="header">Personal</li>
                <li class="grey">$ 89.99</li>
                <li>Home page designed for you.</li>
                <li>Make your skills look even better online.</li>
                <li>Image slideshow's</li>
                <li>Pick the colors you want us to design with.</li>
                <li>+ More</li>
                <li class="grey"><a href="#" class="info">Sign Up</a></li>
            </ul>
        </div>

        <div class="columns">
            <ul class="price">
                <li class="header">Small Business</li>
                <li class="grey">$ 199.99</li>
                <li>Home page with navigation bar and your graphics.</li>
                <li>Allow online purchases.</li>
                <li>Register and Login page to allow online purchases.</li>
                <li>About-Us/Contact pages.</li>
                <li>Pick the colors you want us to design with.</li>
                <li>+ More</li>
                <li class="grey"><a href="#" class="info">Sign Up</a></li>
            </ul>
        </div>

        <div class="columns">
            <ul class="price">
                <li class="header">Forums</li>
                <li class="grey">$ 249.99</li>
                <li>Home page with navigation links.</li>
                <li>Simple admin page to give special access.</li>
                <li>Register and Login page.</li>
                <li>Create topics and sub-topics.</li>
                <li>Pick the colors you want us to design with.</li>
                <li>+ More</li>
                <li class="grey"><a href="#" class="info">Sign Up</a></li>
            </ul>
        </div>
    </div>

    <div class="bodycontainer">

        <div class="quote">
            <div class="quoteheader">
                Start with your personalized quote here!
            </div>
            <div class="quotebody">
                <form action="quote/quote.php" method="post">
                    <?php
                        if(!isset($_SESSION["active"])){
                            ?>
                            <div class="form-group">
                                <label for="firstname">First name:</label>
                                <input type="text" class="form-control" id="firstname" name="firstname" placeholder="First name...">
                            </div>
                            <div class="form-group">
                                <label for="lastname">Last name:</label>
                                <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name...">
                            </div>
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" name="email" placeholder="Email...">
                            </div>
                            <?php
                        }
                    ?>
                    <div class="form-group">
                        <label for="reason">What is this quote for?</label>
                        <input type="text" class="form-control" id="reason" name="reason" placeholder="Describe what type of website this will be for...">
                    </div>
                    <div class="button">
                        <button type="submit" name="start" class="btn btn-default">Lets Start!</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

任何帮助或意见表示赞赏，谢谢。

Answer 1

只需删除

* {
   box-sizing: border-box;
}

并替换

.pricecontainer {
   display: inline-block;
}

所以你的最终代码是：

.pricecontainer {
  display: inline-block;
}

/* Create three columns of equal width */
.pricecontainer .columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

/* Style the list */
.pricecontainer .price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

/* Add shadows on hover */
.pricecontainer .price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.pricecontainer .price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

/* List items */
.pricecontainer .price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

/* Grey list item */
.pricecontainer .price .grey {
    background-color: #eee;
    font-size: 20px;
}

/* The "Sign Up" button */
.pricecontainer.info {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
    .pricecontainer .columns {
        width: 100%;
    }
}

<!--
End of styling for pricing info box
-->

.quote {
    margin-top: 100px;
    width: 100%;
}

.quoteheader {
    font-size: 30px;
    font-color: white;
    background-color: #00A63F;
    color: white;
    text-align: center;
}

.quotebody {
    margin-top: 5vh !important;
    width: 50%;
    margin: 0 auto;
}

.button {
    text-align: center;
}

您的HTML无需更改。