0

嘿伙计们，我似乎无法让它工作。

我有一个带有#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 说侧边栏 div 实际上在 .inner div 之外。但是，如果我查看代码，它就在里面。

4

2 回答 2

0

有几种方法可以处理这个问题。但是，您尚未设置或的float属性。尝试添加到两者并从中删除属性。div#sidebardiv.innerfloat: left;margin-leftdiv#sidebar

您可能需要调整宽度。

于 2011-01-12T17:49:21.953 回答
0

浏览器正在将值相加

.post width, 
#sidebar width

和

#sidebar #margin-left.

去掉侧边栏的左边距，然后向右浮动。

编辑
我只是将它粘贴到小提琴中，并认为我的屏幕爆炸了。您的 css 存在许多问题，这些问题超出了上述修复的范围。最为显着地：

  1. div 默认为 100% 宽度，除非您浮动它们。
  2. 当您在元素上设置边距时，它会添加到元素的宽度（与填充一样）。如果您想指定固定宽度，请确保您的宽度 + 填充 + 边距（+ 旁边的任何内容）小于屏幕宽度。

编辑 2

好的，我发现您在.innerdiv 之外的侧边栏渲染存在问题，请检查以下行：<input type="text" tabindex="3" size="22" value="" id="url" name="url" gtbfieldid="232"> <label for="url">Website</label> </div> 将多余</div>的部分从那里拿走。

于 2011-01-12T17:46:53.963 回答