Question

我发现并修改了CSS的这个基本位，以创建页面的顶部，左侧和侧面部分。

.top {
    position:fixed;
    text-align:center;
    margin-left:250px;
    left:0; right:0;
    height:34px;
    background-color:#F2F2F2
}
.left {
    position:absolute;
    left:0; top:0; bottom: 0;
    width: 250px;
    background:#b41601;
}
.main {
    position: absolute;
    text-align:center;
    margin-left:250px;
    left:0; top:100px; right:0; bottom:0;
}

左边是手风琴菜单，全部排序。我希望顶部是一个标题，只有一个纯色背景，一些文字作为标题。

我的问题是，当我调整窗口大小时，标题会进入并重叠到主要部分。

有没有更好的方法来获得我需要的东西？

Answer 1

查看@media css规则，如果宽度低于某个值，网页会对此做出响应，这在大多数浏览器中也很常见css3现在已成为大多数主流浏览器的标准，甚至是移动设备，它响应调整大小或只是一个小显示

Answer 2

我认为这一定是你问题的解决方案。

＆＃13;

<?php

require_once('include/MVC/View/views/view.edit.php');
/*
 * replace UT_Blogs with the module your are dealing with 
 */

class conn_connectionViewEdit extends ViewEdit {

    public function __construct() {
        parent::ViewEdit();
        $this->useForSubpanel = true; // this variable specifies that these changes should work for subpanel
        $this->useModuleQuickCreateTemplate = true; // quick create template too
    }

    function display() {

        global $mod_strings;
        //JS to make field mendatory 
        $jsscript = <<<EOQ
                   <script>
                       // Change rules_author_c to the field of your module
                       $('#rules_name_c').change(function() {
                            makerequired(); // onchange call function to mark the field required
                       });
                     function makerequired()
                     {
                        var status = $('#rules_name_c').val(); // get current value of the field 
                         if(status != ''){ // check if it matches the condition: if true,
                                addToValidate('EditView','rules_author_c','varchar',true,'{$mod_strings['LBL_RULES_AUTHOR']}');    // mark rules_author_c field required
                                $('#description_label').html('{$mod_strings['LBL_RULES_AUTHOR']}: <font color="red">*</font>'); // with red * sign next to label
                            }
                            else{
                                removeFromValidate('EditView','rules_author_c');                        // else remove the validtion applied
                                $('#rules_author_c_label').html('{$mod_strings['LBL_RULES_AUTHOR']}: '); // and give the normal label back 
                            }
                    }
                    makerequired(); //Call at onload while editing a Published blog record
                </script>
EOQ;
        parent::display();
        echo $jsscript;     //echo the script
    }

}

＆＃13;

.top{
    position:fixed;
    width:100%;
    top:0;
    text-align:center;
    background:aliceblue;
    border-bottom:1px solid #e2e2e2;
}
.down{
    margin-top:25px;
    position:relative;
    width:100%;
}
.left{
    position:relative;
    float:left;
    width:29%;
    border-right:1px solid #e2e2e2;
}
.main{
     position:relative;
    float:right;
    width:70%;
}

＆＃13;

Answer 3

我尝试了Shudhansh的代码，但是它给我想要实现的布局带来了一些问题。

我决定从头开始用我在探索w3schools.com CSS Float guide时发现的更简单的东西。

以下是我使用的内容，到目前为止它的效果非常好。

.top{
    margin-left:250px;
    text-align:center;
    color:#b41601;
    background-color:#F2F2F2
}
.left{
    position:absolute;
    top:0;
    float:left;
    width:250px;
    height:100%;
    background:#b41601; 
}
.main{
    margin-top:10px;
    margin-left:250px;
    text-align:center;
}

调整大小的网站标题

3 个答案: