0
我試圖創建一個示例文檔,並希望增加字體大小,如果我點擊「中」&「大」按鈕。對div元素的文本溢出
當我點擊「中等」按鈕我沒有任何問題,但當我點擊「大」按鈕時,字體大小與其他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>