Jquery 使用jLayout保持集装箱的宽度和高度
我正在使用jLayout来布局我的代码，我注意到它总是覆盖我试图布局的组件的宽度和高度 目前，我正在尝试对一个宽度为900像素、高度为300像素的组件进行边界布局。然而，当我在浏览器中查看它时，它不仅看起来是错误的，而且还删除了这些属性 ，以及代码本身：Jquery 使用jLayout保持集装箱的宽度和高度,jquery,html,css,Jquery,Html,Css,我正在使用jLayout来布局我的代码，我注意到它总是覆盖我试图布局的组件的宽度和高度 目前，我正在尝试对一个宽度为900像素、高度为300像素的组件进行边界布局。然而，当我在浏览器中查看它时，它不仅看起来是错误的，而且还删除了这些属性 ，以及代码本身： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Research App
<!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>
我正在使用jLayout，您可以从此处访问它：。有没有办法保持样式表中的宽度和高度？我正在努力保持Java风格的布局。我找到了答案；/*这就像在布局中放入resize:false一样简单。右侧按钮设置不正确，但此代码行修复了此问题： $'rightArrowButton'.css{left:900-$'rightArrowButton'.outerWidth}；
*/当我试图用$'applicationWindow'.css{width，900}强制applicationWindow的宽度为900像素时；在我设置了borderLayout之后，它不仅打断了borderLayout，还垂直放置了我的元素！由于某些原因，这些元素甚至会从div元素中伸出！！到底发生了什么，我该如何解决？
#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
}