我正在尝试创建示例文档并希望在单击“中”和“大”按钮时增加字体大小。
当我点击“medium”按钮时我没有任何问题但是当我点击“large”按钮时 字体大小与其他 div 重叠。
问题 1. 为什么我加大font-size后文字会重叠？
<!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>
最佳答案
只需从顶部元素中删除 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>
关于jquery - div 元素上的文本溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21104995/