歌剧的布局问题只适用于小提琴，而不能用于实时网站-

|| 
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">

    <title>Look Around You</title>
</head>
<body>
    <div id=\"fade\"></div>
    <div id=\"wrapper\">

    <div id=\"header\">
        <div id=\"logo\">
            <h1><a href=\"http://lookaroundyou.net\">Look Around You</a></h1>
        </div>
        <div id=\"search\">
            <input type=\"text\"/>
            <input type=\"button\" value=\"search\"/>
        </div>
        <p class=\"clear\"/>
        <div id=\"horNav\">
            <ul class=\"horNav\">
                <li><a class=\"home\" href=\"#\">HOME</a></li>
                <li><a class=\"submit\" href=\"#\">SUBMIT</a></li>
            </ul>
            <ul class=\"horLeft\">
                 <li><a class=\"tags\" href=\"#\">TAGS</a></li>
            </ul>
            <ul class=\"advertisment\">
                <li ><a class=\"contact\" href=\"#\">CONTACT</a></li>
            </ul>
            <ul class=\"horRight\">
                 <li><a class=\"hello\" href=\"#\">HELLO</a></li>
            </ul>

        </div>
    </div>

        <div id=\"posts\">
            <p></p>
        </div>
        <div id=\"verNav\">
            <p></p>
            <div id=\"category\">
                <ul></ul>
            </div>
            <div id=\"country\">
                <ul></ul>
            </div>
        </div>
        <div id=\"adverts\">
            <p>adverts</p>
        </div>

        <div id=\"footer\">
            <ul class=\"horNav\">
                <li class=\"horNav\"><a href=\"#\">TOP</a></li>
            </ul>
        </div>

    </div>
</body>
</html>

@font-face {
    font-family: \'QuicksandBook\';
    src: url(\'Quicksand_Book-webfont.eot\');
    src: url(\'Quicksand_Book-webfont.eot?#iefix\') format(\'eot\'),
         url(\'Quicksand_Book-webfont.woff\') format(\'woff\'),
         url(\'Quicksand_Book-webfont.ttf\') format(\'truetype\'),
         url(\'Quicksand_Book-webfont.svg#webfontQNKLE8Me\') format(\'svg\');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: \'QuicksandBold\';
    src: url(\'Quicksand_Bold-webfont.eot\');
    src: url(\'Quicksand_Bold-webfont.eot?#iefix\') format(\'eot\'),
         url(\'Quicksand_Bold-webfont.woff\') format(\'woff\'),
         url(\'Quicksand_Bold-webfont.ttf\') format(\'truetype\'),
         url(\'Quicksand_Bold-webfont.svg#webfont41HQJ7Rv\') format(\'svg\');
    font-weight: normal;
    font-style: normal;

}

*{
    margin:0;
    padding:0;
    font: 12px arial,helvetica,verdana,sans-serif;
    color:black;
    list-style: none;
    text-decoration: none;
    text-align: left;
}
body{
    text-align: center;
}

html{
    overflow-y: scroll;
}
    #wrapper{
        width:85%;
        margin:0 auto;
        min-width:720px;
        max-width:1000px;
    }
/*    #header, #logo, #category,#country{
        width: 100%;
        float:left;
    }*/
    #header{
        margin-top: 15px;
        width: 100%;
}
    #logo{
     max-width: 400px;
     float: left;
    }
    #search{
        float: right;
        max-width: 200px;
    }


    #horNav{
    border-bottom: 2px solid #d5d5d5;
    border-top: 2px solid #d5d5d5;
    padding: 2px 0;
    overflow: hidden;
    display: block;
    width: 100%;
    }

    input{
        display: inline;
}


#posts{
    width:50%;
    max-width: 522px;
    z-index: 200;
}
div.post{
    position: relative;
}
#verNav{
    width:20%;
    margin:0 2%;
    max-width: 130px;
}

#adverts{
    width:25%;
}
#posts,#verNav,#adverts{
    float:left;
}

#posts div.post,#verNav div, #adverts div{
    margin-top:25px;
}

#posts embed, #posts object{
    width: 100%;
    max-width: 512px;
    height: 288px;
}
#pages{
    display: block;
    overflow: hidden;
    width: 100%;
}

#footer{
    width:100%;
border-bottom: 2px solid #d5d5d5;
border-top: 2px solid #d5d5d5;
padding: 2px 0;
    clear:both;
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
}

#mysql{
    margin-top: 20px;
}

#mysql label{
    float: left;
    width: 100px;
}

#mysql label,#mysql input{
    font-size: 14px;
    margin-bottom: 4px;
}
#mysql input{
    border:1px solid black;
}
#mysql input:textarea{
    width: 150px;
}
.clear{
    clear: both;
}


#logo h1 a{
    font-style:italic;
    text-decoration: none;
    font-size: 44px;
}

    #horNav a{
/*        background: black;*/
    }

#category{
    display: none;
}

#verNav p{
    font-weight: bold;
    font-style: italic;
    margin-bottom: 10px;
}


#verNav li{
    /*padding: 1px 0;
    border-top: 1px #b8baba solid;*/

}

#verNav ul{
/*    margin-right: 75px;*/
/*    border-bottom: 1px #b8baba solid;*/

}

#verNav a, #verNav li{
    font-family: \'QuicksandBook\';
    font-size: 13px;
    color:#6b6f70;
}
#verNav li{
        margin-bottom:1px;
}
#verNav p{
font-family: \'QuicksandBook\';
    font-size: 13px;
color:#14b2c3;


}

    .horNav li{
        float:left;
        border-right:2px solid #e6e6dc;
    }

    .horLeft{
        float: left;
    }

    .horRight{
        float: right;
}

    .advertisment li{
        float:right;
        border-left:2px solid #e6e6dc;
    }

    #horNav a,#footer a{
        display:block;
        padding:3px 3px;
        -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     border-radius: 20px;
/*        color:white;*/
font-family: HELVETICA NEUE;
        font-size: 18px;
/*        height: 37px;*/
    }

    #horNav li, #footer li{
        padding: 0 2px;
}

    #horNav a:hover, #footer a:hover{
        background:#e6e6dc;
    }
    .home{
        color: #e23598;
}
.submit{
    color: #ffd236;
}
.tags{
    color: #a5c43a;
}
.hello{
    color: #ffd236;
}
.contact{
    color: #a5c43a;
}
#verNav a:hover{
    background: #e6e6dc;
}

iframe{
    border: none;
    font-size: 14px;
}

#posts div{
    border-bottom: 2px black solid;
    margin-bottom: 20px;
}

#posts iframe{
    border: none;
    width:100%;
    height:288px;
    max-width: 512px;
}

.title{
    font-size: 20px;
    font-family: \'QuicksandBold\';
    color: #6b6f70;
}

.description{
    font-family: HELVETICA NEUE;
    font-size: 14px;
    border-bottom: 1px grey dotted;
    margin-top: 14px;
    padding-bottom: 5px;
    text-align: justify;
}

.info{
    font-family: HELVETICA NEUE;
    font-size: 14px;
color: #6b6f70;
    padding: 5px 0;
}

.category,.country{
        font-family:helevetica neue;
        font-size:14px;
color: #6b6f70;


}

#fade{
    position: fixed;
    top: 0;
    left: 0;
    background: #5f5f5f;
    z-index: -100;
    width: 100%;
    height: 100%;
    opacity:0;
}
中间版本 现场版 附言我说的是div＃search在我的实时版本中位于div＃logo下，但是在jsfiddle中可以正常工作吗？浏览器问题OPERA。 非常感谢     
2020-03-13 2 条评论
分享

没有找到相关结果

    已邀请:

    舞备联

    JSFiddle忽略您的Doctype并使用HTML 5 Doctype。这将触发标准模式。 您的Doctype（无URI的HTML 4 Transitional）将触发Quirks模式。 如果要使用Transitional，请使用规范中指定的Doctype，而不要使用缩写。 
    <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
   \"http://www.w3.org/TR/html4/loose.dtd\">
        
    2020-03-13 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.037778854370117