个人中心
gpt4 book ai didi

html - 响应元素无法正常工作

转载 作者：行者123 更新时间：2023-11-28 10:21:50 25 4
gpt4 key购买 nike

你好，我是响应式的新手，我没有遇到这方面的问题需要一些帮助左侧和右侧工作正常但是当我调整窗口大小时左侧消失并且右侧保持在其原始位置它不会到达顶部。谁能指导我:

html:

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Administrador Veterinario</title>
    <meta name="title" content="Administrador Veterinario"/>
    <meta name="description" content="Administrador Veterinario"/>
    <meta name="keywords" content="Administrador Veterinario"/>
    <link rel="stylesheet" href="../cssVETS/style.css" type="text/css" media="all" />
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">

</head>
<body>
    <div class="wrapper">
        <!-- Heasder Starts Here -->    
        <header class="header">
            <div class="head_content">
            <div id="logo"><a href="administrador.php"><img src="../images/<?php echo logo($vets); ?>" width="150" class="img-rounded" /></a></div>
            </div>
        </header>

        <!-- menu 
        <nav>
        <div class="menu">----</div>
        </nav>
        -->

<div class="subContenedor">
        <!-- Sidebar -->
        <aside class="left-side">
        <!-- Left side bar goes here -->
        </aside>

        <!-- content -->
        <section>
        <div class="right-side">
                <!-- Text Content Goes here -->
        </div>
        </section>
</div>
        <!-- footer -->
        <footer class="footer">
        <!-- Footer content goes here -->
        </footer>

    </div> <!-- End of Wrapper -->
</body>
</html>

CSS:

* { margin: 0; padding: 0; outline: 0; }
a { color: #067aa7; text-decoration: none; cursor: pointer; }
a:hover{ text-decoration: underline; }
img { border: 0; }

article, aside, details, footer, header, menu, nav, section { display: block; }

/* Desing Starts Here */
body {
    font-size: 12px;
    line-height: 22px;
    font-family: arial, sans-serif;
    color: #828282;
    background-color:#F1F1F1;
    max-width: 1050px;
    margin: 0 auto;
}
.wrapper{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto;
}

.header{
    float: left;
    width: 100%;
    height: 170px;
    margin: 5px 0 0 0;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;       
    background-color: #fff;
}
.menu{
    float: left;
    width: 100%;
    height: 40px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;       
/*  margin: 5px 0 0 0;*/
    background-color:#fff;
}
.subContenedor{
    float: left;
    width: 100%;
    border: 1px solid #000;
/*  margin: 5px 0 0 0;*/
    background-color:#FFFFFF;   
}

.left-side{
    float: left;
    width: 200px; 
    margin-left: 5px;
    margin-top:5px;
    margin-bottom:5px;
    background-color:#000;
    min-height: 600px; 
    height: auto !important; 
    height: 600px;  
}
.right-side{
    float: left;
    width: 830px; 
    min-height: 600px; 
    height: auto !important; 
    height: 600px; 
    margin: 5px;
    background-color:#F00;
}
.footer{
    float: left;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;       
    margin: 0 0 10px 0;
    background-color: #bdc8cd;
}

.logo {
    width:auto;
    height:auto;
    float:left;
    margin:7px;
}

.avisos {
    width:400px;
    height:30px;
    float:right;
    margin-top:2%;
    margin-right:10px;
    text-align:right;
}

/***********************   LINKS   ******************************/
a.btnCAJA {
    display: block;
    width:190px;
    height:auto;
    background-color:#fff;
    text-decoration: none;     
    font-size: 11px;     
    color:#314559;
    border-bottom: 1px solid #333;
    padding:5px;
}
a.btnCAJA:hover {
    background-color: #ccc;
    color:#000;
}



/* Lets make the Design Responsive */

@media (min-width: 960px) and (max-width: 1023px) {   /* CSS for browsers less than 1024px*/
    body {  max-width: 920px; }
    .left-side{ width: 200px; }
    .right-side{ width: 700px; }
}

@media (min-width: 768px) and (max-width: 959px) { /* CSS for browsers less than 960px*/
    body {  max-width: 720px; }
    .left-side{ width: 200px; }
    .right-side{ width: 500px; }  
}

@media (min-width: 600px) and (max-width: 767px) {   /* CSS for browsers less than 768px*/
    body {  max-width: 580px; }
    .left-side{ width: 200px; }
    .right-side{ width: 360px; }
}

@media (min-width: 480px) and (max-width: 599px) {   /* CSS for browsers less than 600px*/
    body { max-width: 460px; }
    .header{ width: 450px; border: 3px solid #FFFFFF; border-radius: 5px; }
    .menu{ width: 450px; border: 3px solid #007aad; border-radius: 5px; }
    .subContenedor{ width: 450px;   border: 3px solid #FFFFFF;  border-radius: 5px; }
    .left-side{ visibility:hidden;}
    .right-side{ width: 445px;  margin: 5px 2px 5px 2px; position: relative; top:0px; }   
    .footer{  width: 450px;border: 3px solid #FFFFFF; border-radius: 5px; }
}

@media (min-width: 320px) and (max-width: 479px) {   /* CSS for browsers less than 480px*/
    body {  max-width: 310px; }
    .header{ width: 300px; border: 3px solid #FFFFFF; border-radius: 5px; }
    .menu{ width: 300px; border: 3px solid #007aad; border-radius: 5px; }
    .subContenedor{ width: 300px;   border: 3px solid #FFFFFF;  border-radius: 5px; }
    .left-side{ visibility:hidden;}
    .right-side{ width: 294px;  margin: 5px 2px 5px 2px; }   
    .footer{  width: 300px;border: 3px solid #FFFFFF; border-radius: 5px; visibility:hidden;}
}

@media (max-width: 319px) {  /* CSS For 320px or less browsers */
    body {  max-width: 100%; }
    .left-side{ visibility:hidden;}
    .right-side{ width: 96%; }
}




/* */

最佳答案

我猜您想在较小的屏幕上隐藏 .left-side？尝试改变每一个实例

.left-side{ visibility:hidden;}

到

.left-side{ display:none;}

具有“visibility: hidden”的元素仍然占据文档中的空间，但不可见。您想要从文档流中完全删除该元素并使其不可见，这就是“display: none”所做的。

关于html - 响应元素无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23959924/

25 4 0
文章推荐： swift - 我如何在 Swift 中初始化这种包含属性但没有构造函数的枚举？
文章推荐： css - PUG 和换行符
文章推荐： css - 如何在 iOS 13 的网页内容中使用 New York 字体？
文章推荐： html - 如何将 Logo 和文字并排放置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com