Question

我正在设计一个呼叫中心的状态板，我无法正确地获得2个元素。我使用了一个名为FitText的自动文本缩放器（下面的链接）。除了代码中列出的100％和100之外，我已经使用了FitText的所有其他元素。我无法弄清楚为什么100％和100只与它们所包含的div的大小相比保持这么小。两个容器都是100％宽度。我玩了数百种CSS组合无济于事。任何帮助将不胜感激。通过下面的请求，这里是JSFiddle链接。

http://jsfiddle.net/neggly/57tVW/

CSS

#wrap {
    position: absolute;
    height:100%;
    width:100%;
    margin:0 auto;
    background-color: black;
}

#statuscolorwrap
{
    background-color: aqua;
    float: left;
    width: 1%;
    height: 100%;
}

#numberwrap
{
    background-color: #ff0;
    float: left;
    width: 20%;
    height: 100%;
}

#announcementwrap
{
    background-color: coral;
    float: left;
    width: 79%;
    height: 100%;
}

#queuewrapper
{
    height:40%;
    width:100%;
    float: top;
    background-color: darkorchid;
}

#queuecolors
{
    height:40%;
    width:100%;
    float: top;
    background-color: cadetblue;
}

#queuepercentage
{
    height: 50%;
    width: 100%;
    float: top;
    background-color: chartreuse;
}

#queueholding
{
    height: 50%;
    width: 100%;
    float: bottom;
    background-color: crimson;
}

#topcolor
{
    height: 50%;
    width: 100%;
    float: top;
    background-color: darkseagreen;
}

#bottomcolor
{
    height: 50%;
    width: 100%;
    float: bottom;
    background-color: moccasin;
}

#datetimewrapper
{
    width:100%;
    height:5%;
    float: top;
    background-color: deepskyblue;
}

#messages
{
    width: 100%;
    height: 60%;
    float: top;
    background-color: darkorchid;
    overflow-y: auto;
}

.messagewrapper
{
    width: 100%;
    height: 100px;
    float:top;
    background-color: azure;
}

.messageimportance
{
    float:left;
    width: 5%;
    height: 100%;
    background-color: darkslategrey;
}

.messagesubject
{
    float:left;
    width: 95%;
    height: 100%;
    background-color: blanchedalmond;
}

h1
{
    font: Helvetica, sans-serif;
    margin:0;
    padding:0;
    text-align: center;
}

h2
{
    font: Helvetica, sans-serif;
    margin:0;
    padding:0;
    text-align: center;
}

h3
{
    font: Helvetica, sans-serif;
    font-weight: bold;
    margin:0;
    padding:0;
    text-align: center;
}

#anpicturewrap
{
    float:top;
    width:100%;
    height:45%;
    background-color: darkcyan;
}

#antextwrap
{
    float:top;
    width:100%;
    height:50%;
    background-color: darkkhaki;
    overflow-y: auto;
}

img
{
    max-width: 100%;
    max-height: 100%;
    display:block;
    margin:auto;
}

h4
{
    font: Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: left;
}

#text
{
    width: auto;
    margin-left: 40px;
    margin-right:40px;
    margin-bottom: 30px;
}

.subjecttext
{
    height: 100%;
    width:100%;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: auto;
    margin-bottom: auto;
}

HTML

<html>
    <head>
        <title>Virginia Summary</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="reset.css"/>
        <link rel="stylesheet" href="base.css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="js/libs/jquery/jquery.fittext.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="wrap">
            <div id="numberwrap">
                <div id="queuewrapper">
                    <div id="queuepercentage">
                        <div class="subjecttext">
                            <h1 id="fittext1">1</h1>
                        </div>
                    </div>
                    <div id="queueholding">
                        <h1 id="fittext2">100</h1>
                    </div>
                </div>
                <div id="messages">
                    <div class="messagewrapper">
                        <div class="messagesubject">
                            <div class="subjecttext">
                                <h2 id="fittext3">Enter Subject here</h2>
                            </div>
                        </div>
                        <div class="messageimportance">

                        </div>
                    </div>
                </div>
            </div>
            <div id ="statuscolorwrap">
                <div id="queuecolors">
                    <div id="topcolor">

                    </div>
                    <div id="bottomcolor">

                    </div>
                </div>
            </div>
            <div id="announcementwrap">
                <div id="datetimewrapper">
                    <h3 id="fittext4">12/12/2014 18:00</h3>
                </div>
                <div id="anpicturewrap">
                    <img src="images/pic.jpg" alt=""/>
                </div>
                <div id="antextwrap">
                    <div id="text">
                        <h4 id="fittext5">sample text</h4>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $("h1").fitText(1);
            $("#fittext2").fitText(1.2);
            $("#fittext3").fitText(1.2);
            $("#fittext4").fitText(1.2, {minFontSize: '20px', maxFontSize: '30px'});
            $("#fittext5").fitText(1.2);
        </script>
    </body>
</html>

https://github.com/davatron5000/FitText.js

Answer 1

标题上的默认边距和您设置的某些边距会导致某些对齐问题。如果你将其中的一些切换为填充，并在其中一些div上使用box-sizing:border-box;，那么它会使样式更容易：

div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

在JS小提琴示例中，它看起来并不是Javascript来调整文本实际上是在调用任何东西。当我在小提琴中启用JQuery然后实际调用元素上的文本调整大小时，它确实可以调整元素的大小。

$(document).ready( function(){
    jQuery("#fittext1").fitText(.2);
    jQuery("#fittext2").fitText(.3);
    jQuery("#fittext3").fitText(.6);
    jQuery("#fittext4").fitText(1, {minFontSize: '20px', maxFontSize: '30px'});
    jQuery("#fittext5").fitText(1.2);
});

编辑：我更新了一些CSS，因此它按照您预期的方式工作。我将normalize移动到CSS的顶部，因为它应该是第一个添加的东西。您可能希望在某些框中添加一些空格和内容，但由于我添加了边框，您可以使用填充百分比大小的元素来执行此操作。

http://jsfiddle.net/57tVW/2/

文字不会填补Div

1 个答案: