2

一連の div を使用して AND 論理ゲートを作成しています。.gate最も外側のdivのサイズに合わせてスケーリングしたいと思います。.gatedivの幅と高さの100％にしたいです。

AND ゲートの高さは 2 ピクセル高く、幅は少し不安定です。幅はdivのパディングに関係していると思いますが、.outerそれを行うより良い方法はわかりません。

jsfiddle

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;
}
4

2 に答える 2

2

box-sizing次のプロパティを使用します。

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

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

于 2013-06-26T03:40:01.210 に答える
0

内側の高さを減らし、内側の幅を 2% 増やします。

.inner {
    position: relative;
    margin: 0 20% 0 20%;
    width: 102%;
    height: 98%;
}
于 2013-06-26T04:01:41.940 に答える