这是我的CSS
#site-content{
margin:25px 0 0 260px;
}
.site-content{
width:740px;
margin:auto;
}
#site-menu{
float:left;
width: 260px;
padding: 20px 0;
overflow:hidden;
}
HTML
<div id="site-menu">
<ul>
<li class="menu"><a id="menu-glxavor" class="menu" href="/"></a></li>
<li class="menu"><a id="menu-mermasin" class="menu" href="/arm/about-us"></a></li>
<li class="menu"><a id="menu-usucich" class="menu" href="/arm/for-teachers"></a>
<ul id="menu-usucich-sub">
<li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/teacher-schedule">Դասացուցակ</a></li>
<li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/homeroom-teachers">Դասղեկներ</a></li>
<li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/exemplary-lessons">Օրինակելի դասեր</a></li>
<li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/teacher-training">Վերապատրաստում</a></li>
</ul>
</li>
<li class="menu"><a id="menu-ashakert" class="menu" href="/arm/for-pupils"></a></li>
<li class="menu"><a id="menu-shrjanavartner" class="menu" href="/arm/graduates"></a></li>
<li class="menu"><a id="menu-norutyunner" class="menu" href="/arm/news"></a></li>
<li class="menu"><a id="menu-mankapartez" class="menu" href="/arm/kindergarten"></a></li>
<li class="menu"><a id="menu-nyuter" class="menu" href="/arm/materials"></a></li>
<li class="menu"><a id="menu-bajanortagrvel" class="menu" href=""></a></li>
<div id="subscribe">
<input type="text" id="subscribe-name" placeholder="email" name="subscribe-name" />
<button class="large awesome blue" id="sub-button" type="submit">բաժանորդագրվել</button>
<div id="sub-notification"></div>
</div>
</ul>
</div>
<div id="site-content">
<div class="site-content">
<div class="pages-content-top"></div>
<div class="pages-content-center">
<h2>Համագործակցություն 1</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=37'>Ավելին...</a></span></div><div style='clear:both'></div>
<h2>Համագործակցություն 2</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=38'>Ավելին...</a></span></div><div style='clear:both'></div>
<h2>Համագործակցություն 3</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=39'>Ավելին...</a></span></div><div style='clear:both'></div>
</div>
<div class="pages-content-fot"></div>
</div>
</div>
site-content 得到了除菜单之外的所有宽度(这就是为什么 #site-content{margin:0 0 260px 0})。#site-content 包含固定宽度(740 像素)的 div .site-content。它以#site-content 为中心(这就是为什么 .site-content{width:740px;margin:auto;})。.site-content 包含文章,在下一篇文章之后应该有空格。这就是为什么我使用 clear both,但它在菜单之后获得下一篇文章,所以它清除了所有浮动(菜单浮动)。请解决!