Question

我正在使用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风格的布局。

Answer 1

我明白了; / *它就像在布局（）中放置resize: false一样简单。右键没有设置正确，但这是用这行代码修复的： $('#rightArrowButton').css({left: 900 - ($('#rightArrowButton').outerWidth())}); * /

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

1 个答案: