Question

您好我的名字是kryparn，我需要帮助在容器的右侧添加一个像这样的盒子！

enter image description here

的index.html

    <body>
<div id="rightBox">
    Test2
</div>
    <div id="wrapper">
        <header>
            <center><img src="http://log.guchua.com/wp-content/uploads/2011/06/fireball-resized-image-960x200.jpg" /><center>
            <div id="nav">
                <div id="nav_wrapper">
                <ul>
                    <li><a href="#"><img width="16" height="16" src="img/home-md.png" /> Hem</a></li>
                    <li><a href="#">Nyhetsarkiv</a></li>
                    <li><a href="#">Forum</a></li>
                    <li><a href="#">Administratörer</a></li>
                    <li><a href="#">Spelsektion <img src="img/dropdown-arrow.png"/></a>
                        <ul>
                            <li><a href="#">Server 1</a></li>
                            <li><a href="#">Server 2</a></li>
                            <li><a href="#">Server 3</a></li>
                        </ul>
                    </li>
                </ul>
                </div>
            </div>
        </header>
        <div id="container">
            <div id="first">
                hej
            </div>
        </div>
    </div>

jsfiddle：Here!

Answer 1

为您的内容添加一个带有clearfix的包装器，右侧是主要和侧边栏。有关clearfixing linked to的更多信息，请确保您的包装器有足够的宽度来包含两者（您的#nav和#container设置为960px，而您的#right必须是一定的宽度）

让你的#right float：对，你的#wrapper float：left;设置它们的宽度，它应该可以工作。

为了响应，我建议使用百分比而不是像素作为主要布局元素的宽度

html5 - 如何在我的容器右侧设置一个框

1 个答案: