0

私のシステムの GUI は 1366 X 768 で問題なく動作します。別の解像度で表示すると、横にスクロールする必要がありますが、横にスクロールする必要はありません。また、クロムを押し込もうとすると、divとセクションが乱れctr+-ます。

<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

マージン/パディングを適用するときに、ピクセルの代わりにパーセンテージを使用することで、Web ページをより柔軟にすることができます。たとえば、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 に答える