Question

我想弄清楚为什么联系人和免责声明div忽略左边距。

HTML：

<!-- Package 1 -->
<div class="package2">
    <div class="pkgtop">            
        <div class="pkgtype"> <span id="ratings">SINGLE PANEL</span> </div>
        <div class="pkgcost"><sup class="dolladollabill">$</sup><span id="cost">4,100</span></div>
        <center><div class="pkglength">PER FOUR WEEKS</div></center>
    </div>

    <div class="pkgbottom">
    <div class="pkgselect"><a href="#">Select Plan</a></div>
        <ul class="pkgdesc">
            <li><span id="panelnum">1</span> Panels</li>
            <li><span id="impressions">400K</span> Impressions</li>
            <li>Reach: <span id="reach">15.2%</span> </li>
        </ul>
    </div> 
</div>                                      
<div class="contact">why are you ignoring the left margin?</a></div>
<div class="disclaimer">disclaimer</div>

Answer 1

添加float:left将解决问题 - jsfiddle

.contact{
    margin-left:15px;
    color:#000;
    font-size:16px;
    line-height:16px;
    height:auto;
    float:left;
}

.disclaimer{
    margin: 15px 15px 15px 15px;
    color:#939292;
    line-height:15px;
    font-size:14px;
    height:auto;
    float:left;
}

Answer 2

如果使用firefox或firebug中的Inspector检查布局，则可以看到联系div应用了15的边距。然而，带有边距的接触div的左半部分隐藏在浮动的package2 div后面，接触div中的文本只是被推过。

如果你想在package2 div旁边排列整个div，那么你可以像Micallef建议的那样做，并在联系人/免责声明div上使用float:left。

如果您不希望在视图宽度不够宽时将联系人/免责声明下拉到package2下面，也可以更改为使用表格布局（display:table-row，display:table-cell）。

.package-row {
   display: table-row;
}

.package2 {
   ...
   display: table-cell;
}

.contact {
   ...
   display: table-cell;
}

.disclaimer {
   ...
   display: table-cell;
}

http://jsfiddle.net/AJw7x/1/

左边距被忽略了

2 个答案: