Увеличение / уменьшение масштаба Как сохранить соотношение сторон? - PullRequest
2 голосов
/ 22 марта 2011

Рабочий пример: http://jsfiddle.net/4jmY2/4/

Если вы увеличите или уменьшите масштаб (ctrl +/-), вы увидите, как элементы перемещаются, как я могу сохранить соотношение сторон, чтобы содержимое оставалось неизменным независимо от размера?

HTML

<div class="check_box">        
    <div class="check">
        <div class="your_name">Your Name</div>
        <div class="bank_name">Your Bank Name</div>
        <div class="check_number_top">1001</div>
        <div class="your_address">Your Address</div>
        <div class="bank_address">Bank Address</div>
        <br />
        <div class="date">Date ________</div>
        <br />
        <div class="pay">Pay to the<br />Order of _______________________________ $________</div>
        <br />
        <div class="pay_line">_________________________________________ Dollars</div>
        <br />
        <div class="sign">_____________________</div>
        <br />
        <div class="check_number_bottom">&#9288;<strong>1001</strong>&#9288;</div>
        <div class="routing_number">&#9286;<strong>123456789</strong>&#9286;</div>
        <div class="account_number"><strong>987&nbsp;6543210</strong>&nbsp;&#9288;</div>
    </div>
</div>

CSS

.check_box {
    width: 300px;
}
.check {
    border: 2px solid #1A1B1B;
    background-color: #DFE5E5;
    height: 110px;
    font-size:80%;
    font-family: Georgia;    
    padding:0px;
    margin: 0px;    
}
.your_name {
    float:left;
    padding:0px 30px 0px 5px;
    font-size:105%;
}
.your_address {
    float:left;
    padding:0px 40px 0px 5px;
    font-size:85%;
}
.bank_name {
    float:left;
    padding:0px 30px 0px 5px;
    font-size:105%;
}
.bank_address {
    float:left;
    padding:0px 30px 0px 5px;
    font-size:85%;
}
.check_number_top {
    float:left;
    padding:0px 0px 0px 40px;
    font-size:105%;
}    
.date {
    float:left;
    padding:0px 0px 0px 220px;
    font-size:85%;
}
.pay {
    float:left;
    padding:0px 0px 0px 5px;
    font-size:85%;
}
.pay_line {
    float:left;
    padding:0px 0px 0px 5px;
    font-size:85%;
}
.sign {
    float:left;
    padding:0px 0px 0px 165px;
    font-size:85%;
}
.check_number_bottom {
    float:left;
    padding:0px 0px 0px 5px;
    font-size:85%;
    font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}
.routing_number {
    float:left;
    padding:0px 0px 0px 5px;
    font-size:85%;
    font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}    
.account_number {
    float:left;
    padding:0px 0px 0px 10px;
    font-size:85%;
    font-family:"Arial Narrow"; /* need to change the font's of the numbers */
}
.routing_number_tip {
    float:left;
    padding:0px 0px 0px 10px;
    font-size:85%;
    color:#1F4CA5;
}
.account_number_tip {
    float:left;
    padding:0px 0px 0px 10px;
    font-size:85%;
    color:#1F4CA5;
}

Ответы [ 2 ]

2 голосов
/ 25 марта 2011

Ну, я наконец-то сделал это.Я должен был сделать это с нуля, и это заняло некоторое время.

Live Demo

Это выглядит такдля меня:

  • Протестировано в IE7 / 8 плюс последние версии Firefox, Chrome, Safari, Opera.
  • Вы можете увеличить!

Если что-то не так или у вас есть вопросы, дайте мне знать.

HTML:

<div class="check_box">
    <div class="check">
        <span class="your_left"><em>Your Name</em><br />Your Address</span>
        <span class="your_mid"><em>Your Bank Name</em><br />Bank Address</span>
        <span class="your_right"><em>1001</em></span>

        <span class="date">Date<span></span></span>

        <span class="pay_to">Pay to the<br />Order of<span></span></span>
        <span class="dollar"><br />$<span></span></span>
        <span class="dollars"><span></span>Dollars</span>

        <span class="extraline"><span></span></span>

        <span class="numbers">
            <span>&#9288;<b>1001</b>&#9288;</span>
            <span>&#9286;<b>123456789</b>&#9286;</span>
            <span><b>987&nbsp;6543210</b>&nbsp;&#9288;</span>
        </span>
    </div>
</div>

CSS:

.check_box {
    font: 10px/1.3 Georgia, serif;

    border: 2px solid #1a1b1b;
    background-color: #dfe5e5;

    width: 292px;
    padding: 4px;
    margin: 0
}
.check {
    position: relative;
    height: 102px
}
.check > span {
    position: absolute
}
.check em {
    font-size: 12px;
    font-style: normal
}
.date span, .pay_to span, .dollar span, .dollars span, .extraline span {
    border-bottom: 1px solid #000;
    zoom: 1 /* fix ie7 */
}

.your_left {
    top: 0; left: 0
}
.your_mid {
    top: 0; left: 95px; text-align: center
}
.your_right {
    top: 0; right: 0
}

.date {
    top: 28px; right: 0
}
.date span {
    padding-left: 50px;
    margin: 2px 0 0 3px
}

.pay_to {
    top: 35px; left: 0
}
.pay_to span {
    padding-left: 180px;
    margin-left: 3px
}

.dollar {
    top: 35px; right: 0; text-align: right
}
.dollar span {
    padding-left: 50px;
    margin-left: 3px
}

.dollars {
    top: 62px; left: 0
}
.dollars span {
    padding-left: 250px;
    margin-right: 3px
}

.extraline {
    top: 76px; right: 0
}
.extraline span {
    padding-left: 120px
}

.numbers {
    bottom: 0; left: 0
}
.numbers span {
    margin: 0 10px 0 0
}
1 голос
/ 23 марта 2011

Не уверен, что понимаю ваш вопрос. Но когда я увеличиваю, текстовые компоненты увеличиваются, в то время как фоновый стиль проверки не делает.

Звучит так, будто вы хотите, чтобы чек также увеличивался. Если это так, вам может понадобиться создать стили div, управляемые em, которые будут масштабироваться с выбором шрифта в браузере.

Вот хорошая статья с несколькими примерами .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...