我正在使用 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 风格的布局。
最佳答案
我想通了；/* 就像将 resize: false 放在 layout() 中一样简单。右键没有设置正确，但是用这行代码修复了:
$('#rightArrowButton').css({left: 900 - ($('#rightArrowButton').outerWidth())});
*/
关于jquery - 使用 jLayout 保持容器的宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26684950/