【问题标题】:inline/inline-block not working. Divs still stacked内联/内联块不起作用。 Divs 仍然堆叠
【发布时间】:2014-08-03 05:31:12
【问题描述】:

我之前已经发布了一些这样的代码,试图将侧边栏链接放在正确的位置并以一种特殊的方式看起来,我决定朝着不同的方向前进。我现在需要的是知道我应该做什么来获得我在侧边栏旁边而不是在它下面标记为“内容”的 div。我什么都试过了。侧边栏和内容 div 一起在同一个 div 中,我尝试在 inline、inline-block 中显示。没有任何效果。我只希望它们彼此相邻并保持水平。你能再帮我一次吗?非常感谢!

此处显示的代码: http://jsfiddle.net/eNUpJ/11/

HTML

 </div>
    <div id="wholething">
        <div id="sidebar">
                <h3>Navigation Links</h3>

            <div id="sidelinks">
                <div id="buttons"><a href="#">Home</a>
                </div>
                <div id="buttons"><a href="#">Biography</a>
                </div>
                <div id="buttons"><a href="#">News</a>
                </div>
                <div id="buttons"><a href="#">Music</a>
                </div>
                <div id="buttons"><a href="#">Contact</a>
                </div>
            </div>
        </div>
        <div id="content">
            <p>News stuff and things</p>
        </div>
    </div>
</body>

CSS

#sidebar {
    background: #464646;
    width: 250px;
    height: 500px;
    margin-left: 50px;
    border-radius: 15px;
    position: relative;
}
h3 {
    font-family:'Coda', cursive;
    color: white;
    background: #6B6B6B;
    font-size: 24px;
    text-align: center;
    padding: 15px 0 8px 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
#sidelinks {
    font-family:'Armata', sans-serif;
    width: 250;
    font-size: 25px;
    text-decoration: none;
    color: white;
    background-color: #4D4D4D;
    padding: 10px;
    line-height: 40px;
}
#buttons a {
    text-decoration: none;
    color: white;
}
#content {
    position: relative;
    width: 750px;
    border-radius: 15px;
    background: #464646;
}
#wholething {
    display: inline;
}

【问题讨论】:

    标签: html inline css


    【解决方案1】:

    同时提供#content 和#sidebar float: left。您还应该从#wholething 中删除display:inline。此外,您应该知道,如果您想在 #content 和 #sidebar 下方添加任何内容 - 例如,带有版权声明或类似内容的页脚 - 您需要给它clear:both,这将强制它成为在两个浮动的 div 下方。

    【讨论】:

    • 非常感谢。我会试试看。我试过使用 float: 对;在内容 div 上,它只是让它正确,但不在侧边栏旁边。
    • 成功了!对此,我真的非常感激。我也会使用那个页脚的东西。我不打算将任何版权内容放在底部,因为这只是一个练习页面。我还在学习。
    猜你喜欢
    • 1970-01-01
    • 2020-04-17
    • 1970-01-01
    • 1970-01-01
    • 2018-04-23
    • 1970-01-01
    • 2012-03-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多