Question

我正在尝试使用jQuery easyui布局功能将区域内的按钮居中：

<!DOCTYPE html>
<html  style="height: 90%;">
<head>
   <meta charset="UTF-8">
   <title>The Analytic Platform - Home Page</title>
   <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="../themes/icon.css">
   <link rel="stylesheet" type="text/css" href="demo.css">
   <script type="text/javascript" src="../jquery.min.js"></script>
   <script type="text/javascript" src="../jquery.easyui.min.js"></script>

   <style>
       .middle {
               height:30%;
        }
        .topandbelow {
               height:40%;
        }


    </style>
</head>
<body style="height: 90%;">
  <h2>The Analytic Platform</h2>
  <p>Easy analytics for everyone!</p>

  <div id="p" class="easyui-panel" title="Step 1: Load data for analysis" style="width:100%;height:100%;padding:10px;">
  <div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%">
    <div data-options="region:'west',split:false,border:true" style="width:40%;" title="Get data from Excel file">
      <div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%">
         <div data-options="region:'centre',split:false,border:true" style="width:100%;">
       <a href="ExcelUpload.html" class="easyui-linkbutton" >Upload Excel file</a>
     </div>
      </div>
    </div>
    <div data-options="region:'east',split:false,border:true" style="width:40%;height:100%" title="Get data from database">
      <div class="easyui-layout" data-options="fit:false" style="width:100%;height:100%">           
             <div data-options="region:'north',split:false,border:true" class="topandbelow"></div>
             <div data-options="region:'centre',split:false,border:true" class="middle">
        <a href="DefineDBconnection.html" class="easyui-linkbutton">Define Database Connection</a>
         </div>
         <div data-options="region:'south',split:false,border:true" class="topandbelow"></div>
          </div>
    </div>  
      </div>
   </div>
 </body>
</html>

“东”区域未显示其嵌套的“中心”区域，其中“北”区域覆盖它。

这里可能出现什么问题？

jQuery easyui布局居中 - 一个区域覆盖另一个区域

0 个答案: