1

我需要从左边开始的菜单 div，宽度固定（260px）。然后内容 div 具有相对宽度（整个宽度 - 除了菜单 div），其中将是一个始终位于内容 div 中心的容器（margin：auto）

这是我的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;
}

一切似乎都很好，但浮动有问题。当我在 .site-content 2 div 中设置（浮动）然后使用 clear:both 来清除浮动，有很大的差距，其他元素在菜单结束后下降。你能给我解决办法吗？（抱歉英语不好）

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>
4

2 回答 2

0

您应该.site-content建立新的块格式化上下文，以使其clear内部仅影响其内部的浮动，而不影响其外部的浮动。最合适的选项似乎是overflow: hiddenand display: table（因为宽度是固定的，布局不会因为变化而display改变）。

于 2013-07-23T18:19:14.053 回答
0

特洛伊木马是对的...我删除了浮动属性并在 CSS 中为站点内容使用了宽度自动，因为您已经声明它不固定..我不知道这是否是您想要的，但请查看这个小提琴 WORKING FIDDLE

CSS

  h2{
margin:0;
}

编辑：好的，我相信你的问题出在网站内容部分。第一个段落的结尾和第二个标题之间有很大的差距。至少这是我所理解的，当我像这样在小提琴中运行它时，这就是你的代码所显示的。

我刚刚从您的代码中删除了一行。即第46行

  <div style='clear:both'></div>

现在第一段和第二段之间没有间隙。理想情况下，您应该使用“ clear:both ”属性，因为您在右侧有一个菜单。因此，如果您使用“ clear:both ”属性，div 会自动向下对齐，因为它会在右侧找到菜单。希望你明白我的意思。检查这个例子。在这里，您将看到两个 para 之间的差距是由于“ clear:both ”属性造成的。删除它，差距就消失了。

最终解决您的问题（我希望）。

于 2013-07-23T18:00:16.137 回答