Question

我不确定为什么contactBox与mainInfo框重叠。联系人框也没有拉伸到其父容器960px。

CSS

.mainInfo {
position:relative;
height:500px;
background-color: pink;
padding:30px 0 0 30px;

}

.col-6 .imagePlaceholder {
width:300px;
height:420px;
background-color: red;
}

.col-6 .about {
position: absolute;
top:30px;
left:414px;
padding:1em;
}

.contactBox {
height:450px;
background-color:green;
}

这是一个JS小提琴： http://jsfiddle.net/2zm47/

Answer 1

你的HTML搞砸了。应该像：

<div class="container">
   <div class="mainInfo">
            <div class="col-6">
                <div class="imagePlaceholder"></div>
            </div>

            <div class="col-6">
                <div class="about">
                    <p>...</p>
                    <p>...</p>
                </div>
            </div>
    </div>

   <div class="contactBox"></div>
</div>

Answer 2

我可能会以不同的方式对此css进行编码，但请查看

.mainInfo {
position:relative;
height:500px;
background-color: pink;
padding:30px 0 0 30px;

}

.col-6 .imagePlaceholder {
width:300px;
height:420px;
background-color: red;
}

.col-6 .about {
position: absolute;
top:30px;
left:414px;
padding:1em;
}

.contactBox {
height:450px;
background-color:green;
}

我希望这会有所帮助。我在小提琴的JS部分写了一个注释。

http://jsfiddle.net/emersive/84WeT/1/

孩子没有伸展到它的父母

2 个答案: