Question

我有一个联系我们页面，其中包含几个充当容器的div，在这些容器中有更多包含内容的div。这是页面的结构：

                                <div class="divBlock">
                                    <div class="spacer10"></div>
                                        <div class="centerDiv">
                                            <div>
                                                <div class="divContactImg">
                                                    <div class="branchHeader">Durban</div>
                                                    <div class="branchText">89 Joe Slovo Street</div>
                                                    <div class="branchText">Durban</div>
                                                </div>
                                                <div class="divContactImg">
                                                    <div class="branchHeader">Hillbrow</div>
                                                    <div class="branchText">Point Building</div>
                                                    <div class="branchText"> StreetG</div>
                                                    <div class="branchText">Hillbrow</div>
                                                </div>
                                                <div class="divContactImg">
                                                    <div class="branchHeader">Pinetown</div>
                                                    <div class="branchText">56 Hill Street</div>
                                                    <div class="branchText">Pinetown</div>
                                                </div>                                                                                                            
                                            </div>                                                
                                                </div>
                                            </div>
                                        </div>
                                    <div class="spacer10"></div>
                                </div>

问题是这些div（divContactImg）与它们的容器div（divBlock）重叠。这是CSS：

    .centerDiv  { text-align : center; max-width : 100%; height : auto; margin: 0px auto 0px auto; display: block ; }
    .divContactImg {
    background-image: url('Images/Contacts_Branches_BG.png');
    width:220px;
    height:74px;
    border-left: thin solid #333;
    border-top: thin solid #333;
    border-right: thin solid maroon;
    border-bottom: thin solid maroon;
    float:left;
    text-align:left;
    margin-left: 10px;
    margin-top: 1px;
    border-radius:5px;
}

.branchHeader {
    font-size: 24px;
    font-family:Arial Narrow;
    margin-left: 10px;
    margin-top: 5px;
    text-transform:uppercase;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 00 #000;

}
.branchText {
    font-size: 12px;
    color:#b0b0b0;
    margin-left: 10px;
    text-transform:uppercase;
    }
    .branchHeaderOpening {
    font-size: 24px;
    font-family:Arial Narrow;
    margin-left: 10px;
    margin-top: 5px;
    text-transform:uppercase;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 00 #000;
    text-align:center;
     }

.divBlock { border-left: thin solid #333; border-right: thin solid #333; border-bottom: thin solid #333; border-radius: 0px 0px 8px 8px; 
             margin: 0px 10px 0px 10px; background: #000000;}

我试过设置清楚：两者都在容器div上，但没有运气。如果我取出浮动：左边然后中心div伸展，所以孩子div填充它，但是我需要这些div显示三个，这使得它们每行显示一个。

Answer 1

我替换了

.divContactImg {
    background-image: url('Images/Contacts_Branches_BG.png');
    width:220px;
    height:74px;
    border-left: thin solid #333;
    border-top: thin solid #333;
    border-right: thin solid maroon;
    border-bottom: thin solid maroon;
    /*float:left;*/
      display:inline-block; **/**ADD**/**
      vertical-align:top; **/**ADD**/**
    text-align:left;
    margin-left: 10px;
    margin-top: 1px;
    border-radius:5px;
}

划分重叠的父div

1 个答案: