0

这是我的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，但它在菜单之后获得下一篇文章，所以它清除了所有浮动（菜单浮动）。请解决！

http://jsfiddle.net/isherwood/WP66N/1/

4

3 回答 3

0

我只是取出清除 div 并感到高兴：

http://jsfiddle.net/isherwood/WP66N/2/

<div class="pages-content-center">
    <h2>Համագործակցություն 1</h2>

    <div><span class='img'>

...

于 2013-07-23T19:13:17.807 回答
0

我想真正的问题是.img或者.text仍然需要浮动，并且它们之后的标题需要清除。我建议在单独的块格式化上下文overflow: hidden中添加以.site-content隔离其内容（浮动或不浮动）：

.site-content {
    width:540px;
    margin:auto;
    overflow: hidden;
}

小提琴（带有示例浮动图像）

于 2013-07-23T19:40:07.717 回答
0

如果我是你，我会避免使用浮动。我建议您使用一些具有固定尺寸的 div 和

display: inline-block;

这样，div 将被放置在彼此旁边，您将需要清楚的技巧：both 等等。唯一的，注意显示：inline-block；不能在 IE7 上正常工作。只需使用 display: inline 即可。

于 2013-07-23T20:47:55.837 回答