DIV职位问题

Question

你知道为什么我的红色div（.block）被放置在蓝色包装器上方而不在其中吗？也期望文本也在红色DIV内。谢谢http://jsfiddle.net/B3CL6/

HTML：

<div class="wrapper blue-background ">
    <div class="block width100">
        <div class="block-left">
                 <h3>Block left </h3>
        </div>
        <!-- End DIV block-left -->
        <div class="block-right">
             <h1>block right</h1>

        </div>
        <!-- End DIV block-right -->
    </div>
    <!-- End DIV block width100 -->
</div>
<!-- End wrapper -->

CSS：

.wrapper {
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    overflow: hidden;
}
.block {
    padding: 20px;
    text-align: justify;
    background-clip: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    background: red;
}
.width100 {
    width: 100%;
}
.top {
    margin-top: 30px;
}
.blue-background {
    background: #124191;
}
.block-left {
    float: left;
    box-sizing: border-box;
    width: 50%;
}
.block-right {
    float: right;
    overflow: hidden;
    box-sizing: border-box;
    width: 50%;
}

Answer 1

据我所知，你想要Blue Block里面的Red Block。如果是的话

试试这个。设置padding-top：10px到Padding：10px

 .wrapper {
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    overflow: hidden;
    padding: 10px;
}

如果你想要里面的文字做这样的事情或为“Block Right”文字添加另一种风格

H1{
   display: inline; 
}

Answer 2

Red div（.block）实际上存在于Blue div（.wrapper）中。正如JoshC所建议的那样，您可以通过将红色背景设置为半透明来检查它。

要使文本在红色DIV中， 从overflow: hidden;类中删除.wrapper属性，并将其添加到.block类。 这应该可以解决你的问题。