1

WordPressテンプレートを変更して、コンテンツゾーンに別の列を追加しました。

ここでわかるように：http ：//scorejava.com/wordpress351/記事のコンテンツゾーンには2つの列が含まれています（最初の列には最後に挿入された投稿が表示され、2番目の列には最も読まれた投稿が表示されます）

これを行うために、 index.phpワードプレステンプレートファイルにそれぞれid="column1"とid="column2"を持つ2つのdivを作成しました。

次に、テンプレートのstyle.cssファイルで、これらのdiv要素に対して次のプロパティを宣言しました。

#column1{
    float: left;
    width: 50%;
    overflow:hidden;
    padding-top: 20px;
    padding-bottom: 20px;
}

#column2{
    width: 50%;
    padding-left: 30px;
    overflow:hidden;
    padding-top: 20px;
    padding-bottom: 20px;
}

左側にフローティングするには、column1 divを配置し、右側にcolumn2を配置します。

Firefoxではうまく機能しているようです（UbuntuのFirefx 19.0.2でテストしました）が、Chromeを使用して開くと、これは正しくなく、column2divがcolumn1divの下に表示され、後者に対してわずかに右にシフトします。 。

なぜ？私は解決策を見つけようとしましたが、それ以上のアイデアはありません（CSSはあまり得意ではありません）

Chromeブラウザでこの問題を解決するのを手伝ってもらえますか？

Tnx

アンドレア

4

3 に答える 3

3

クロスブラウザの簡単なソリューション：

#column1 {
    width: 48%;
}
#column2 {
    width: 48%;
    padding-left: 4%;
}
于 2013-03-26T11:59:49.060 に答える
1

各列の幅をに設定した50%ので、右側の列の適切な幅は50%プラスpadding-left: 30pxです。あなたがする必要があることは設定されbox-sizing: border-boxており、それはうまくいくはずです。詳細はこちらをご覧ください。

IE8では機能しないことに注意してください。

于 2013-03-26T11:54:13.770 に答える
0

列の間に30pxのマージンが必要な場合は、次のようにします。

#column1, #column2{
    float:left;
    width: 50%;
    padding-left: 30px;
    overflow:hidden;
    padding-top: 20px;
    padding-bottom: 20px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

#column1{
    padding-right:15px;
}

#column2{
    padding-left:15px;
}

このbox-sizingプロパティにより、要素の幅を変更せずに要素にパディングを追加できるようになります。通常、要素の幅は次のように計算されます：total width= width+ padding、box-sizing:border-boxこれはtotal width=になりますwidth

于 2013-03-26T18:21:22.400 に答える