2014-01-14 58 views
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> 

回答

2

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>