Question

我有一个带有一组div的AND逻辑门。我希望它们以最外层.gate div的大小进行缩放。我希望它是.gate div的宽度和高度的100％。

我的东西几乎正常工作，AND门高2像素，宽度有点不稳定。我认为宽度与.outer div上的填充有关，但我不确定是否有更好的方法。

HTML

<div class="gate">
    <div class="outer">
        <div class="inner">
            <div class="andInA"></div>
            <div class="andInB"></div>
            <div class="andOutA"></div>
            <div class="andLeft"></div>
            <div class="andRight"></div>
        </div>
    </div>
</div>

CSS

.gate {
    position: relative;
    width: 150px;
    height: 100px;
    background-color: #ccc;
}
.outer {
    position: relative;
    padding: 0 30% 0 0;
    height: 100%;
}
.inner {
    position: relative;
    margin: 0 20% 0 20%;
    width: 100%;
    height: 100%;
}
.gate .andLeft {
    position: absolute;
    left: 0px;
    height: 100%;
    width: 45%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 0px solid black;
}
.gate .andRight {
    position: absolute;
    right: 0px;
    height: 100%;
    width: 75%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 0px solid black;
    border-right: 1px solid black;
    border-radius: 0% 100% 100% 0%;
}
.andInA {
    position: absolute;
    top: 25%;
    margin-left: -20%;
    width: 20%;
    height: 1px;
    border-top: 1px solid black;
}
.andInB {
    position: absolute;
    top: 75%;
    margin-left: -20%;
    width: 20%;
    height: 1px;
    border-bottom: 1px solid black;
}
.andOutA {
    position: absolute;
    top: 50%;
    right: 0px;
    margin-right: -20%;
    width: 20%;
    height: 1px;
    border-top: 1px solid black;
}

Answer 1

使用box-sizing属性：

* {
     box-sizing: border-box;
    -moz-box-sizing: border-box;
}

http://jsfiddle.net/eNT2d/3/

Answer 2

降低你的内心高度并使你的内心宽度增加2％。

.inner {
    position: relative;
    margin: 0 20% 0 20%;
    width: 102%;
    height: 98%;
}

试图让div的内容适当缩放到它的大小

2 个答案: