Question

<html>
<style>

.leftColumn {
    width: 49.2%;
    float: left;
    padding: 0;
    font-size: 15px;
}

.rightColumn {
    width: 48.9%;
    float: right;
    padding: 0;
    font-size: 15px;
}

.horiHR {
    width: 100%;
    background: #e1e1e1;
    padding: 0;
    border: solid;
    border-width: 2px;
    border-color: #e1e1e1;
    border-radius: 10px;
}

.centerHR {
    margin-left: auto;
    margin-right: auto;
    width: .1%;
    height: 100%;
    background: #e1e1e1;
    padding: 0;
    border: solid;
    border-width: 2px;
    border-color: #e1e1e1;
    border-radius: 10px;
    margin-top: 0;
    margin-bottom: 0;
}

.superContainer {
    height: 330px;
       margin-top:200px;
    margin-top: 0px;
    width: 100%;
}

/*The superContainer is in the headway block, which is another container. this means that the margin of the superContainer actually makes the block taller; it doesn't push the block further down. This must be done in headway*/
.superContainer:hover {
    background: #007fff;
}

.topContainer {
    width: 100%;
    height: 30%;
    margin-top: -45px;
    text-align: center;
    font-size: 24px;
    font-family: Arial;
    line-height: 33px;
}

.midContainer {
    width: 100%;
    height: 55%;
    margin-top: 0;
    margin-bottom: 0;
    background: transparent;
}

.bottomContainer {
    width: 100%;
    height: 10%;
    margin-top: 60px;
    margin-bottom: -10px;
}

.leftPar {
    text-align: center;
    font-size: 22px;
    line-height: 35px;
    background: transparent;
}

.leftBottom {
    padding-bottom: 10px;
    margin-top: -15px;
    width: 20%;
    float: left;
    margin-left: 18.5%;
}

.midBottom {
    padding-bottom: 10px;
    margin-top: -15px;
    width: 20%;
    margin-left: 8.75%;
    float: left;
}

.rightBottom {
    padding-bottom: 10px;
    margin-top: -15px;
    margin-left: 7.25%;
    width: 20%;
    float: left;
}

</style>



<div class="superContainer">
<div class="topContainer">
WE MAKE IT EASY
</div>




<div class="midContainer">
<hr class="horiHR"></hr>
    <div class="leftColumn">

<p class="leftPar">
        We have detailed lessons, quick review guides, and quizzes for over 15 courses
</p>  

</div>


    <div class="rightColumn">
        PICTURE 
    </div>

<hr class="centerHR"></hr>
<!--I don't know why, but you have to put the float left first, then the float right, and then the center thing-->

<hr class="horiHR"></hr>
</div>


<div class="bottomContainer">


<div class="leftBottom1">
A</div>

<div class="midBottom">
B</div>

<div class="rightBottom">
C</div>
</div>
</div>
</html>

以上是我的代码，但由于某种原因，我无法正确格式化。底部字母A，B和C不拆分底部容器，顶部容器中的内容甚至不显示。任何人都知道我的代码有什么问题吗？

Answer 1

您的代码中存在小错误：

1 - .topcontainer为负边距，因此屏幕外的文字为margin-top: -45px;

2 - <div class="leftBottom1">应该没有“1”，只是“leftBottom”

在经过那些小修正之后，它的效果很好：jsfiddle.net/GXJJW/

搞乱格式化CSS

1 个答案: