Question

我试图创建一个示例文档，并且如果我点击“Medium”并且想要增加字体大小。 “大”按钮。

当我点击“中号”按钮时，我没有任何问题但是当我点击“大”按钮时 font-size与其他div重叠。

问题 1.当我增加字体大小时，为什么文本会重叠？

<!DOCTYPE html>
<html>

    <head>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>

        <script>
            $(document).ready(function(){

                $("#switcher-medium").click(function(){
                    alert('This is medium');
                    //$('body').removeClass();
                    $('body').addClass('medium');
                });

                $("#switcher-large").click(function(){
                    alert('This is large');
                    //$('body').removeClass();
                    $('body').addClass('large');
                });

            });
        </script>

        <style>
            body{
                background-color:white;
            }

            #header-1st{
                height:30px;
                width:70%;
                float:left;
            }

            #switcher-control{
                height:30px;
                width:30%;
                float:left;
            }
            .medium{
                font-size: 1.5em;
            }

            .large{
                font-size: 2.5em;
            }

        </style>

    </head>

    <body>

        <div id="main-container">
            <div id="header-1st">
            </div>
            <div id="switcher-control">
            <button id="switcher-default"> 
                Default
            </button>
            <button id="switcher-medium"> 
                Medium
            </button>
            <button id="switcher-large"> 
                Large
            </button>
            </div>
            <div id="content">
            This is a test page and you can increase the font-size by clicking the default, medium and large on top corner.
            </div>
        </div>

    </body>

</html>

Answer 1

的 LIVE DEMO 的

从您的热门元素中删除 height:30px;

这就是你所需要的：

#header-1st{ width:70%; float:left; } #switcher-control{ float:left; width:30%; }

JS：

var sizes = [1, 1.5, 2.5]; $("#switcher-control button").click(function(){ var i = $(this).index(); $('body').css({fontSize: sizes[i]+"em"}); });

对于此HTML

<div id="main-container"> <div id="header-1st">HEADER</div> <div id="switcher-control"> <button>Default</button> <button>Medium</button> <button>Large</button> </div> <div id="content"> This is a test page and you can increase the font-size by clicking the default, medium and large on top corner. </div> </div>

div元素上的文本溢出

1 个答案: