3

工作示例：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;
}
4

2 回答 2

2

好吧，我终于尝试这样做了。我必须从头开始，而且花了一段时间。

现场演示

对我来说它看起来像这样：

  • 在 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
}
于 2011-03-25T15:28:57.520 回答
1

不确定我是否理解您的问题。但是当我放大时，文本组件会放大，而背景“检查”样式不会。

听起来您也希望支票扩大规模。如果是这样，您可能需要创建 em 驱动的 div 样式，这将随着浏览器字体选择而缩放。

这是一篇很好的文章，有几个例子。

于 2011-03-23T17:00:34.713 回答