0

我的 css 似乎没有被拾取，我遇到了问题。我有 3 种不同类型的具有相同字符的样式。奇怪的是，当我应用<div class = "block halfleft">..</div>它时，它会显示正确的样式，但<div class = "twoblock halfleft">似乎不起作用！任何想法是什么原因造成的？

CSS

#member {
        padding: 0;
}

#member .block {
        width: 960px;
        margin-bottom: 40px;
        padding-left:30px;
        height: 475px;
        float: left;
        text-align: left;   
    }   
#member .twoblock {
        width: 960px;
        margin-bottom: 0;
        padding-left:75px;
        padding-bottom: 75px;       
        height: 100%;
        float: left;
        text-align: left;   
    }
#member .threeblock {
        width: 960px;
        margin-bottom: 0;
        padding-left:75px;
        padding-bottom: 75px;       
        height: 500px;
        background-color: #fff;
        float: left;
        text-align: left;   
    }
#member .block.halfleft, #member .twoblock.halfleft, #member .threeblock.halfleft{
        width: 520px;   
        height: 240px;  
        float: left;
        padding-top: 25px;
    }
#member .block.halfright, #member .twoblock.halfright, #member .threeblock.halfright{
        width: 350px;
        height: 240px;
        float: left;
        padding-top: 55px;      

    }

页

//WORKS://
<div class="block">
    <div class="block halfleft">//text//</div>
        <div class="block halfright">//text//</div>
</div>

//DOESNT WORK BUT WHAT I WANT TO MAKE WORKING://
<div class="twoblock">
    <div class="twoblock halfleft">//text//</div>
        <div class="twoblock halfright">//text//</div>
</div>

//WORKS://
<div class="twoblock">
    <div class="block halfleft">//text//</div>
        <div class="block halfright">//text//</div>
</div>
4

1 回答 1

1

你有一些填充问题！在 .twoblock > .twoblock 和其他一些情况下，75px 会翻倍。避免这种情况的简单方法是添加

box-sizing:border-box;

对于您的所有定义，这意味着填充将包含在定义的宽度中，而不是添加到其中。

http://jsfiddle.net/8gzPh/

于 2013-04-02T18:52:05.910 回答