cxj118800 2020-04-01 15:36 采纳率: 16.7%
浏览 471
已结题

页面最上面有一个定位栏，定位栏下面左侧是菜单，占据的位置小一点，右侧则是面积大一些的一块。怎么改可以把我的那个timetable那个div放到右边去。并且可以根据页面大小自动调整

问题：页面最上面有一个定位栏，定位栏下面左侧是菜单，占据的位置小一点，右侧则是面积大一些的一块。怎么改可以把我的那个timetable那个div放到右边去。并且可以根据页面大小自动调整。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/newtime.css">
    <script src="js/jquery.js"></script>
</head>
<body>
<nav class="navbar">
        <span class="navbar-toggle" id="js-navbar-toggle">
            <i class="fas fa-bars"></i>
        </span>
    <a href="#" class="logo">logo</a>
    <ul class="main-nav" id="js-menu">
        <li>
            <a href="#" class="nav-links">Home</a>
        </li>
        <li>
            <a href="#" class="nav-links">Products</a>
        </li>
        <li>
            <a href="#" class="nav-links">About Us</a>
        </li>
        <li>
            <a href="#" class="nav-links">Contact Us</a>
        </li>
        <li>
            <a href="#" class="nav-links">Blog</a>
        </li>
    </ul>
    <a class="Register" href="Registeration.html"><button id="Re_btn">Register</button></a>
    <a class="Logout" href="Login.html"><button id="Logout_btn">Log Out</button></a>
</nav>
<div class="container">







        <div class="left">

                <h2><span class="icon-user"></span>Normal Function</h2>
                <ul style="display:block">
                    <li><a href="info.html" target="right"><span class="icon-caret-right"></span>Setting</a></li>
                    <li><a href="password.html" target="right"><span class="icon-caret-right"></span>Change Password</a></li>
                    <li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Course</a></li>
                    <li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Tutorial</a></li>
                    <li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Tutorial</a></li>


                </ul>
            </div>
        </div>




    </div>


    <div class="right"></div>

    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">标题</th>
                <th scope="col">标题</th>
                <th scope="col">标题</th>
                <th scope="col">标题</th>
                <th scope="col">标题</th>
                <th scope="col">标题</th>

            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>

            </tr>
            <tr>
                <th scope="row">2</th>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>

            </tr>
            <tr>
                <th scope="row">3</th>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>

            </tr>
            <tr>
                <th scope="row">4</th>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>

            </tr>
            <tr>
                <th scope="row">5</th>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>

            </tr>
            <tr>
                <th scope="row">6</th>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>

            </tr>
            <tr>
                <th scope="row">7</th>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>

            </tr>
            <tr>
                <th scope="row">8</th>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>

            </tr>

            </tbody>
        </table>
    </div>



    <div class="footer">footer</div>





</div>

</body>
</html>

CSS


body {
    font-family: 'Josefin Sans', sans-serif;
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Josefin Sans', sans-serif;
}
.container{
displat:grid;
}
.left{
    grid-colum:1;
 }
 .right{
     grid-colum:2
 }

/*-------------------------navrbar-------------------------*/
.navbar {
    font-size: 18px;
    background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 10px;
}

.main-nav {
    list-style-type: none;
    display: none;
}

.nav-links,
.logo {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
}

.main-nav li {
    text-align: center;
    margin: 15px auto;
}

.logo {
    display: inline-block;
    font-size: 22px;
    margin-top: 10px;
    margin-left: 20px;
}

.navbar-toggle {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 24px;
}

.active {
    display: block;
}

@media screen and (min-width: 768px) {
    .navbar {
        display: flex;
        justify-content: space-between;
        padding-bottom: 0;
        height: 70px;
        align-items: center;
    }

    .main-nav {
        display: flex;
        margin-right: 30px;
        flex-direction: row;
        justify-content: flex-end;
    }

    .main-nav li {
        margin: 0;
    }

    .nav-links {
        margin-left: 40px;
    }

    .logo {
        margin-top: 0;
    }

    .navbar-toggle {
        display: none;
    }

    .logo:hover,
    .nav-links:hover {
        color: rgba(255, 255, 255, 1);
    }
/*-------------------------navbar end-------------------------*/


.header{
    grid-colum: span 12;
    justify-content:space-between;
    align-items:center;
    padding:30px 10%;

}
.head-l {
    position:relative;
    float: right;
    margin-right:15px;
    margin-top: 15px;
    margin-left: 15px;
}
.head-l .button {
    padding: 8px 15px;
}
.head-l .bg-blue:hover {
    background-color: #03b6fd;
}

.head-reg{
    position:relative;
    float: right;
    margin-right:15px;
    margin-top: 15px;
    margin-left: 15px;
}
.head-reg.button{
    padding: 8px 15px;
}
.leftnav {
    width: 180px;
    height: 100%;
    position: fixed;
    top: 70px;
    left: 0px;
}
.leftnav-title {
    height: 50px;
     color: #FFF;
    padding-left: 22px;
    font-size: 14px;
    line-height: 50px;
}
.leftnav-title span {
    margin-right: 10px;
}
.leftnav h2 {
    padding: 10px 0 10px 22px;
    transition: all .1s ease-in-out;
    display: block;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    border-top: 1px solid #b5cfd9;
}
.leftnav h2.on {
    color: #09c;
}
.leftnav .border-bottom {
    border-bottom: 1px solid #b5cfd9;
}
.leftnav h2 span {
    margin-right: 10px;
}
.leftnav h2:hover {
    color: #09c;
}
.leftnav ul {
    display: none;
    border-top: 1px solid #b5cfd9;
    padding: 5px 0;
    opacity: 1;
}
.leftnav ul li {
    list-style-type: none;
}
.leftnav ul li a {
    display: block;
    padding-left: 30px;
    line-height: 30px;
}
.leftnav ul li span {
    margin-right: 8px;
}
.leftnav ul li a:hover, .leftnav ul li a.on {
    color: #09c;
}

.logo {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
}
.wrapper{
    display:grid;
    grid-template-colums:repeat(12,1fr);
    grid-template-rows:100% 100% 100%;
}



#Re_btn{
    font-family: Helvetica,Arial;
    font-size: 13px!important;
    height: 40px;
    line-height: 18px!important;
    padding: 3px 18px;
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    border-radius: 10px;
    margin: 0 8px 0 3px;
    border: 1px solid #3383da;
    color: #ffffff;
    background-color: darkblue;
    cursor: pointer;

}
#Logout_btn {
    font-family: Helvetica, Arial;
    font-size: 13px !important;
    height: 40px;
    line-height: 18px !important;
    padding: 3px 18px;
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    border-radius: 10px;
    margin: 0 8px 0 3px;
    border: 1px solid #3383da;
    color: #ffffff;
    background-color: #ff3140;
    cursor: pointer;

}
}
  • 写回答

1条回答 默认 最新

  • 简_洋 2020-04-03 17:12
    关注

    大哥你真坑。我改了你的代码，回答的时候直接被禁言了，你代码里面有啥非法词组啊，？我给你改了，css代码贴不上去，被禁言了. css我只改了一部分，你看一下吧，我只把改了的css给你贴上来。
    图片说明

    // css代码就改了这一点。
.container{
    overflow: hidden;
}
.left{
    float: left;
    min-width: 140px;
    width:30%;
 }
 .right{
     float: left;
     width: 70%;
 }
 .right table {
     width: 100%;
     height: 100%;
 }
 .right table td {
     text-align: center;
 }

    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
    <script src="js/jquery.js"></script>
</head>

<body>
    <nav class="navbar">
        <span class="navbar-toggle" id="js-navbar-toggle">
            <i class="fas fa-bars"></i>
        </span>
        <a href="#" class="logo">logo</a>
        <ul class="main-nav" id="js-menu">
            <li>
                <a href="#" class="nav-links">Home</a>
            </li>
            <li>
                <a href="#" class="nav-links">Products</a>
            </li>
            <li>
                <a href="#" class="nav-links">About Us</a>
            </li>
            <li>
                <a href="#" class="nav-links">Contact Us</a>
            </li>
            <li>
                <a href="#" class="nav-links">Blog</a>
            </li>
        </ul>
        <a class="Register" href="Registeration.html"><button id="Re_btn">Register</button></a>
        <a class="Logout" href="Login.html"><button id="Logout_btn">Log Out</button></a>
    </nav>
    <div class="container">
        <div class="left">
            <h2><span class="icon-user"></span>Normal Function</h2>
            <ul style="display:block">
                <li><a href="info.html" target="right"><span class="icon-caret-right"></span>Setting</a></li>
                <li><a href="password.html" target="right"><span class="icon-caret-right"></span>Change Password</a>
                </li>
                <li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Course</a>
                </li>
                <li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Tutorial</a>
                </li>
                <li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Tutorial</a>
                </li>
            </ul>
        </div>
        <div class="right">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">标题</th>
                        <th scope="col">标题</th>
                        <th scope="col">标题</th>
                        <th scope="col">标题</th>
                        <th scope="col">标题</th>
                        <th scope="col">标题</th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>

                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>

                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>

                    </tr>
                    <tr>
                        <th scope="row">4</th>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>

                    </tr>
                    <tr>
                        <th scope="row">5</th>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>

                    </tr>
                    <tr>
                        <th scope="row">6</th>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>

                    </tr>
                    <tr>
                        <th scope="row">7</th>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>

                    </tr>
                    <tr>
                        <th scope="row">8</th>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>

                    </tr>

                </tbody>
            </table>
        </div>
    </div>
    </div>

    <div class="footer">footer</div>
    </div>
</body>

</html>
    评论

报告相同问题？

悬赏问题

  • ¥15 悬赏Python-playwright部署在centos7上
  • ¥15 psoc creator软件有没有人能远程安装啊
  • ¥15 快速扫描算法求解Eikonal方程咨询
  • ¥20 我的是道格手机，重置后屏幕右上角出现红色字的未写入tee key 和未写入google key请问怎么去掉啊
  • ¥30 关于R语言运行分区生存模型中的问题！
  • ¥15 校内二手商品转让网站
  • ¥20 高德地图聚合图层MarkerCluster聚合多个点，但是ClusterData只有其中部分数据，原因应该是有经纬度重合的地方点，现在我想让ClusterData显示所有点的信息，如何实现？
  • ¥100 求Web版SPC控制图程序包调式
  • ¥20 指导如何跑通以下两个Github代码
  • ¥15 大家知道这个后备文件怎么删吗，为啥这些文件我只看到一份，没有后备呀