Question

我有一个问题。

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。因此，当我在div之间添加清晰时，会出现一个很大的空间。请帮忙

Answer 1

问题是你的#site-menu。它很长，漂浮在左边。清除两者后，清除长菜单并创建长空白区域。

使用clear时的大空间：两者兼而有之

1 个答案: