使用jLayout保持容器的宽度和高度

我正在使用jLayout来布局我的代码，并且我注意到它会覆盖我的宽度，高度，用于我尝试布局的组件。使用jLayout保持容器的宽度和高度

目前，我试图做一个应该有900像素，300像素的高度的组件的borderLayout。但是，当我在浏览器中查看它时，它不仅看起来不对，而且还会触发这些属性！

Here is the mess that is what I have right now，以及代码本身：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Research Application</title> 
     <!-- The necessary imports that give your application the layout and ease-of-implementation that Java has --> 
     <!-- First, the jQuery library itself--> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <!-- Then, all of the jLayout stuff --> 
     <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jquery.sizes.js"></script> 
     <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.grid.js"></script> 
     <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.flexlayout.js"></script> 
     <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.flow.js"></script> 
     <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.border.js"></script> 
     <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jquery.jlayout.js"></script> 
     <!-- including the styleSheet --> 
     <link rel="stylesheet" href="style/style.css" type="text/css"></link> 
    </head> 
    <body> 
     <h1 id="title">Research Application</h1> 
     <!-- This is where you might want to setup the jLayout script --> 
     <script> 
      // don't you just love function pointers? 
      $(document).ready(function(){ 
       // in here goes all of the stuff to layout 
       // first, make the borderLayout for the applicationWindow itself 
       $('#applicationWindow').layout({ 
        type: 'border', 
        maximumWidth: 900, 
        height: 300, 
        hgap: 3, 
        vgap: 3 
       }); 
       // then, layout the questionPanel into verticalLayout 
       // next, make the picturesContainer into a horizontalLayout 
      }); 
     </script> 
     <!-- need div element that will the container for the application itself --> 
     <div id="applicationWindow"> 
      <!-- need element that will notify the user of the question number, as well as a way to change the number programmatically --> 
      <label id="problemNumberLabel" class="north"> 
      Question number: 0 of 10 <!-- This is subject to change --> 
      </label> 
      <!-- need left arrow widget (You might want to do what Facebook did for the pictures, with the CSS and everything, and use <a> --> 
      <button class="navigatorButton west" id="leftArrowButton"> 
       << 
      </button> 
      <!-- need div element that will house the inner panel --> 
      <div id="questionPanel" class="center"> 
       <!-- Content to be determined possibly by either JavaScript (via the html() function, or the innerHTML attribute), or by controlling the file 
        that gets loaded to here --> 


     </div> 
      <!-- need right arrow widget (You might want to do what Facebook did for the pictures, with the CSS and everything, and use <a> --> 
      <button class="navigatorButton east" id="rightArrowButton"> 
       >> 
      </button> 
      <!-- container for lower buttons --> 
      <div id="lowerButtonsContainer" class="south"> 
       <!-- This is where you put the "Share","Log on" buttons --> 
       <button id="ShareButton"></button> 
       <button name="LogOnButton"></button> 
      </div> 
     </div> 

    </body> 
</html>

这是我的风格的代码，以及：

#title 
{ 
    text-align: center; 
} 

#problemNumberLabel 
{ 
    text-align: right; 
} 

#applicationWindow,#problemNumberLabel 
{ 
    width: 900px; 
    display: inline-block; 
    position: relative; 
} 

#applicationWindow 
{ 
    margin-left: auto; 
    margin-right: auto; 
    height: 300px; 
} 

.navigatorButton 
{ 
    height: 100px; 
    background-color: #ffffff; // make the color of the buttons white 
}

我使用jLayout，你可以去访问从这里：http://www.bramstein.com/projects/jlayout/ 。 有没有办法让样式表中的宽度和高度保持不变？（我试图保持Java风格的布局

来源

2014-10-31 Mike Warren

当我试图强迫applicationWindow的宽度为900个像素（用'$（ '＃applicationWindow'）的CSS（{ “宽度”， “900”}） ;'在我设置borderLayout的位置之后），它不仅打破了borderLayout，而且将元素垂直放置！由于某些原因，元素甚至突出了div元素!! 这是怎么回事，我该如何解决这个问题？ – 2014-11-02 02:45:58

我想通了;/*它只是把resize: false放在layout（）中，右边的按钮没有设置正确，但是这是固定的与这行代码： $('#rightArrowButton').css({left: 900 - ($('#rightArrowButton').outerWidth())}); */

来源

2014-11-02 09:07:08

使用jLayout保持容器的宽度和高度

回答

相关问题