0

やあみんな、私はそれを動作させることができないようです。

その下に#commentsと#respondフォームが付いたdiv.postがあります。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は実際には.innerdivの外側にあります。ただし、コードを見ると、その中にあります。

4

2 に答える 2

0

ブラウザはの値を合計しています

.post width, 
#sidebar width

と

#sidebar #margin-left.

サイドバーの左マージンを取り除き、右にフロートさせます。

編集
私はこれをフィドルに貼り付けたところ、画面が爆発したと思いました。上記の修正だけでなく、cssに多くの問題があります。最も注目すべき点：

  1. フロートしない限り、divのデフォルトは100％の幅です。
  2. 要素にマージンを設定すると、要素の幅に追加されます（パディングも同様です）。固定幅を指定する場合は、幅+パディング+マージン（+その隣にあるもの）が画面幅よりも小さいことを確認してください。

編集2

.innerさて、 divの外側のサイドバーレンダリングに問題があることがわかりました。行を確認してください。<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 に答える
0

これを処理する方法はいくつかあります。ただし、またはのfloatプロパティを設定していません。両方に追加して、プロパティをから削除してみてください。div#sidebardiv.innerfloat: left;margin-leftdiv#sidebar

おそらく幅を調整する必要があります。

于 2011-01-12T17:49:21.953 に答える