0

誰かが助けてくれることを願っています、私はこれを理解できません。_s テンプレートを使用してワードプレスのテーマを作成していますが、右側の列に問題があります。

改行をたくさん入れるだけで、流れは正しいです。ただし、テキスト、img、またはその他のものを挿入するとすぐに、そのデータは中央の列の下に落ちます。

私はそれが私が見ていない単純なものであることを知っています。

ここにページへのリンクがあります。 http://juststin.com/test/help.html

そして、ここにcssがあります

.content-area {
        float: left;
}
.site-content {
        margin: 0 20%;
        width: 60%;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 5px;
        border-style: solid;
        border-color: #333333;
        background: #ffffff;
}
.pictures {
        margin: 0 81%;
        width: 20%;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 2px;
        border-style: solid;
        border-color: #ffffff;
        background: #ffffff;
}
.site-main .widget-area {
        float: left;
        margin: 0 0 0 -100%;
        width: 20%;
        background: #2E9AFE;
        background: #333333;
}
.site-footer {
        clear: both;
        width: 100%;
        background: #ffffff;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 5px;
        border-style: solid;
        border-color: #333333;
}
.site-header {
        clear: both;
        width: 100%;
        background: #ffffff;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 5px;
        border-style: solid;
        border-color: #333333;
}

.menu-div {
        border-width: 2px;
        border-style: solid;
        border-color: #ffffff;
        background-color: #ffffff;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        overflow: visible;
}

#page {
        width: 90%;
        margin: 0 auto;
}
4

3 に答える 3

0

問題は、奇妙な列のレイアウトです。列の前にレンダリングするだけでなく、margin-left -100%あなたに与えます。あなたの列は浮かんでいないので、 100％ のコンテナの後に流れます。.widget-area#primary#pictures#primarywidth

オプション 1) 必要な場所に列を配置し、負のマージンを使用しないでください。

オプション 2) に固定幅を割り当て#primary(約 60% のように見えます)、#pictures同様に左にフロートします

于 2013-03-28T00:58:46.607 に答える
0

列レイアウトのマークアップを変更する必要があります。マークアップと css を少し編集して機能させました (使用はお勧めしません)。http://pastebin.com/raw.php?i=hqi0MLTcをご覧ください

トピック外: 個人的には、サイドバー/左右の列に固定幅を使用し、コンテンツ領域のみに可変幅を使用することを好みます。

これがお役に立てば幸いです。

于 2013-03-28T01:55:06.443 に答える
0

問題は、右側のバーのサイズを小さくする必要があることでした。境界線を追加すると、サイズが 100% を超えていたと思います。

于 2013-03-29T21:25:51.327 に答える