1

HTML / CSSで簡単なウェブサイトを作ろうとして、HTML/CSSを学ぼうとしています。これまでにいくつかの基本的なスケルトンを作成しましたが、解決できないことがあります。

divの記事リストsidebar1、sidebar2がdivフッターの内側に配置されているという問題がありますが、divの記事リストsidebar1、sidebar2をフッターの外側に配置したいと思います。

関連するコードは次のとおりです。HTML：

        <!-- article listing -->
        <div class="articlelisting">
            articlelisting
        </div>

        <!-- sidebar 1 -->
        <div class="sidebar1">
            sidebar1
        </div>

        <!-- sidebar 2 -->
        <div class="sidebar2">
            sidebar2
        </div>

        <!-- footer -->
        <div class="footer">
            footer
        </div>

CSS：

.articlelisting {
display: inline;
width: 48%;
float: left;
}

.sidebar1 {
display: inline;
width: 24%;
float: right;
}

.sidebar2 {
display: inline;
margin-right: 15px;
width: 24%;
float: right;
}

 .footer {
width: 100%;
border: solid 1px red;
}

編集：私は記事リストのdivを配置しました。すみません、見逃しました。

私の質問は、なぜdivの記事リスト、sidebar1、sidebar2、divフッターの内側にあるのか、そしてそれらをdivフッターの外側に配置する方法ですか？

ありがとう

4

3 に答える 3

2

ねえ、このようにあなたのフッターにクリアします

    .footer{
    clear:both;
    overflow:hidden;
       /// and write some properties as required to
    }

ライブデモhttp://tinkerbin.com/9vrEFCqo

于 2012-07-16T07:17:32.340 に答える
2

clear: both;フッタースタイルに追加します。これにより、フッターがfloat-ingである先行するdivから離れたままになります。

.footer {
  clear: both; <-- Add this
  width: 100%;
  border: solid 1px red;
}​

jsfiddleに実例を投稿しました

于 2012-07-16T07:18:50.933 に答える
1

次に、記事リスト、sidebar1、sidebar2をフッターの外側に配置します。

そして与える

.footer {
width: 100%;
border: solid 1px red;
clear:both;
}
于 2012-07-16T07:15:04.400 に答える