Question

嘿伙计们，我似乎无法让它发挥作用。

我有一个带有#comments的div.post和一个#respond表单。 div.post包含#comments和#respond表单。我只是想把侧边栏浮动到整个div.post的右边，我似乎无法让它工作。

这是一个例子。任何想法如何解决 - 它可能很简单。：）

<!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>layout</title>

    <style type="text/css">

    body {
        margin:0;
        padding:0;
    }

    #main {
        background:#cfcfcf;
    }

    .inner {
        margin: 0 auto;
        padding: 96px 72px 0;
        width: 1068px;
        border-color: #000;
        border-style: solid;
        border-width: 0 1px;
        color: #3C3C3C;
    }

    .post {
        width: 705px;
        background:#999;
    }

    #comments, #respond {
        width: 705px;
        background:#999;
    }

    #sidebar {
        width:338px;
        background:#777;
        margin-left:730px;
    }

    </style>
</head>
<body>

    <div id="main">

        <div class="inner">

        <div id="post" class="post">

            <h2>Lorem Ipsum Test Page</h2>

            <div class="entry">

                <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

            </div> <!-- entry -->

            <div id="comments">

                <h2>One Response</h2>

                <ol class="commentlist">
                    <li id="comment" class="comment">
                        <div class="comment-body">
                            <div class="comment-author vcard">
                                Tom says:
                            </div>

                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea found. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                        </div>
                    </li>
                </ol>
            </div> <!-- comments -->

            <div id="respond">

                <h2>Leave a Reply</h2>

                <form id="commentform" method="post" action="">

                    <input type="text" aria-required="true" tabindex="1" size="22" value="" id="author" name="author" gtbfieldid="230"> <label for="author">Name (required)</label>

                    <input type="text" aria-required="true" tabindex="2" size="22" value="" id="email" name="email" gtbfieldid="231"> <label for="email">Mail (will not be published) (required)</label>

                    <input type="text" tabindex="3" size="22" value="" id="url" name="url" gtbfieldid="232"> <label for="url">Website</label> </div>

                    <textarea tabindex="4" rows="10" cols="58" id="comment" name="comment"></textarea>

                    <input type="submit" value="Submit Comment" tabindex="5" id="submit" name="submit">
                    <input type="hidden" id="comment_post_ID" value="36" name="comment_post_ID">
                    <input type="hidden" value="0" id="comment_parent" name="comment_parent">

                </form>

            </div> <!-- respond -->

        </div> <!-- post -->

        <div id="sidebar">

            <h2>Meta</h2>
                <ul>
                    <li>Login</li>
                    <li>Anything</li>
                </ul>

            <h2>Subscribe</h2>
                <ul>
                    <li>Entries (RSS)</li>
                    <li>Comments (RSS)</li>
                </ul>

        </div> <!-- sidebar -->

        </div> <!-- inner -->

    </div> <!-- main -->

</body>
</html>

编辑：你能看到我的HTML中的任何错误。 firebug说侧边栏实际上在.inner div之外。但是，如果我看看里面的代码。

Answer 1

浏览器正在添加

的值

.post width, 
#sidebar width

AND

#sidebar #margin-left.

拿走侧边栏上的左边距，然后向右漂浮。

修改
我只是将它粘贴在一个小提琴中，并认为我的屏幕爆炸了。你的css有很多问题，不仅仅是上面的修复。最值得注意的是：

div默认为100％宽度，除非你浮动它们。

在元素上设置边距时，会将其添加到元素的宽度（填充）。如果要指定固定宽度，请确保宽度+填充+边距（+旁边的任何内容）小于屏幕宽度。

编辑2

好的，我发现您在.inner div之外的侧边栏呈现问题检查了一行：<input type="text" tabindex="3" size="22" value="" id="url" name="url" gtbfieldid="232"> <label for="url">Website</label> </div>从那里获取额外的</div>。

Answer 2

有几种方法可以解决这个问题。但是，您尚未为float或div#sidebar设置div.inner属性。尝试向两者添加float: left;并从margin-left中删除div#sidebar属性。

您可能需要调整宽度。

css：浮动侧边栏的问题

2 个答案:

编辑2