1

私は問題があります。

HTML

<!DOCTYPE html>
<html>
<head>
<title>Nor-Avetisyan</title>
<link rel="stylesheet" type="text/css" href="views/css/style.css" />
<script src="views/js/jquery-2.0.1.min.js"></script>
<script>
/*$(document).ready(function() {
var width = $('#site-content-left').width();
alert(width);
});
*/
</script>
</head>
<body>
<div id="site-page">
    <div id="site-under-header">
        <a class="flag-arm" href="#"></a>
        <a class="flag-en" href="#"></a>
        <div class="clear"></div>
    </div>
    <div id="site-header">
        <div id="site-header-center"></div>
    </div>
<div id="site-content-container">
        <div id="site-menu">
            <a id="menu-glxavor" href="#"></a>
            <a id="menu-mermasin" href="#"></a>
            <a id="menu-usucich" href="#"></a>
            <a id="menu-ashakert" href="#"></a>
            <a id="menu-shrjanavartner" href="#"></a>
            <a id="menu-norutyunner" href="#"></a>
            <a id="menu-mankapartez" href="#"></a>
            <a id="menu-nyuter" href="#"></a>
            <a id="menu-bajanortagrvel" href="#"></a>
        </div>
        <div id="site-content">
            <div id="site-content-left">
            <h1>Նոր կառուցվող դպրոցաշեքն</h1>
            </div>
            <div id="site-content-right">
            sd
            </div>
            <div class="clear"></div>
            <div id="site-content-news">
            a
            </div>
            <div id="site-content-social">
            soc
            </div>
        </div>
<div class="clear"></div>
<a id="kap" href="#"></a>
<div id="site-footer">
            Copyright
        </div>
    </div>
</div>

CSS

@font-face {
    font-family: erevan;
    src: url(../fonts/erevan.ttf);
   }
body {
background:#e4eef7;
margin:0
}
#site-page{
    margin: 0 auto;
    width: 100%;
}
#site-under-header{
width:950px;
margin:0 auto;
text-align:right;
padding:3px 0;
}
#site-under-header .flag-arm {background:url('../images/flag-arm.png') no-repeat;width:40px;height:40px;float:right;margin-left:5px;}
#site-under-header .flag-en {background:url('../images/flag-en.png') no-repeat;width:40px;height:40px;float:right;}
#site-header{
    background: url('../images/site-header-repeat.png') repeat-x;
    height:220px;

}
#site-header-center{
    background: url('../images/site-header.png') no-repeat;
    width:1000px;
    height:220px;
    margin:0 auto;
}
#site-content-container{
    width: 100%;
}

#site-content{
    margin-left:400px;
    padding: 20px 0;

}
#site-menu{
    float:left;
    width: 400px;
    padding: 20px 0;
}
#site-menu #menu-glxavor{background:url('../images/menu-glxavor.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;}
#site-menu #menu-mermasin{background:url('../images/menu-mermasin.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;}
#site-menu #menu-usucich{background:url('../images/menu-usucich.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;}
#site-menu #menu-ashakert{background:url('../images/menu-ashakert.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;}
#site-menu #menu-shrjanavartner{background:url('../images/menu-shrjanavartner.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;}
#site-menu #menu-norutyunner{background:url('../images/menu-norutyunner.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;}
#site-menu #menu-mankapartez{background:url('../images/menu-mankapartez.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;}
#site-menu #menu-nyuter{background:url('../images/menu-nyuter.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;}
#site-menu #menu-bajanortagrvel{background:url('../images/menu-bajanortagrvel.png') no-repeat;width:320px;height:68px;display:block;margin:0 0 25px 0;}

#site-footer{
    background: #fff;
    text-align: right;
    padding: 20px;
    height: 34px;

    margin:80px 0 25px 0;
}
#kap {background:url('../images/kap.png') no-repeat;width:300px;height:230px;float:left;clear:both;margin:0 0 25px 0;}
.clear{clear:both;}
#site-content-left{background:red;float:left;}
#site-content-right{background:blue;width:300px;float:left;}
#site-content-left h1{margin:0;}
#site-content-news{float:left;}
#site-content-social{float:left;}

<div class="clear"></div>の後に追加しましたsite-content-right。現在、site-content-newsとsite-content-socialは約 の間ダウンしてい1000pxます。そのため、s の間に clear を追加すると、大きなスペースが表示されますdiv。助けてください

4

1 に答える 1

1

問題はあなたの #site-menu です。かなり長く、左に浮いています。両方をクリアすると、長いメニューがクリアされ、長い空白領域が作成されます。

于 2013-05-31T18:57:23.253 に答える