0

我的系统的 GUI 与 1366 X 768 配合得很好。当它以不同的分辨率显示时，我需要并排滚动，但它不应该。此外，当我尝试按下ctr+-chrome 时，div 和 section 变得混乱。

<header>
    <h1><font color = "#666" face="Arial Black" size="5%">&nbsp;&nbsp;&nbsp;Isplika:</font> A Web-based IDE for C++ Source Content for Programming  Beginners
    <span id = "strength" > Our Stength, Our God Ü </span>
    </h1>
</header> 

<div id = "wrapper">

    <section id = "board">

        <section id = "board_c">
            <div id = "board_ln"> </div>
            <div id = "board_code_w">
                <div id = "tags_c" class = "tags">C++ Code</div>
                <div id = "board_code" contenteditable = "true" ></div>
                <div id = "board_code_dup" contenteditable = "false"></div>
            </div>
        </section>

        <section id = "board_mb">   
        </section>

        <section id = "board_code_info">

           Row: 
           <section id = "row" class="tab_space_right">
            1
           </section> 

           Col:
           <section id = "col" class="tab_space_right">
             2
           </section>

           Number of Lines:
           <section id = "numLines" class="tab_space_right">
             3  
           </section>

        </section>
    </section>

    <section id = "interpreter">
        <div id = "tags_int" class = "tags">Result</div>
        <section id = "interpreter_c">
        </section>
        <section id = "interpreter_input">
        <input id = "inputF" type = "text" />
        </section>
        <div id = "inputB" class="buttons">
        INPUT
        </div>
    </section>    

    <section id = "identifier">

            <div id = "tags_iden" class = "tags">Variables</div>

            <section id = "identifier_type">

            </section>

            <section id = "identifier_name" >

            </section>

            <section id = "identifier_value">

            </section>
    </section>    

    <section id = "controls">
        <div id = "run" class = "buttons" >RUN</div>
        <div id = "stop" class = "buttons" >STOP</div>
        <div id = "next" class = "buttons" >NEXT</div>
        <div id = "support" class = "buttons" >SUPPORT</div>
    </section>
</div>

</body>
</html>

在此处输入图像描述

#board应该是可调整大小的，但#interpreter应该#identifier是静态的

4

2 回答 2

1

在应用边距/填充时，您可以通过使用百分比而不是像素来使您的网页更加灵活。例如，而不是margin: <value>px;使用margin: <value>%;

于 2013-09-20T16:11:15.707 回答
1

您可以使用 javascript(jquery) 轻松解决它。

jQuery(document).ready(function($) {

    function resizeBoard(){
        $('#board').css(width, ($(window).width() - $(#interpreter).width());
    }
    resizeBoard();

    $(window).resize(function() {
         resizeBoard();  
    });
});

我还将它放在一个调整大小函数中，以便每次调整屏幕大小时都会执行它。

问候提摩太

于 2013-09-20T16:24:05.233 回答