0

基本的な Wordpress テンプレートを編集していて、複数列のフロント ページ (1 行に 2 セットの記事を表示) を探しています。私はCSSで次のことを行いました：

.front-page-container article:nth-child(odd) {
        width:50%;
        float:left;
        clear:both;
}
.front-page-container  article:nth-child(even) {
        width:50%;
        float:right;
}

wherefront-page-contanerは含まれる div のクラスです。HTML 構造は次のとおりです。

<div class="front-page-container">
    <article id="post-1"></article>
    <article id="post-2"></article>
    <article id="post-3"></article>
    <!-- etc -->
</div>

ポスト 1 と 2 を同じ行に配置し、ポスト 3 (および 4) を次の行に配置したいと考えています。

CSS は機能しますが、この画像のように、一緒に表示したい 2 つの投稿が一致しません。何らかのオーバーラップがある場合に幅を調整しようとしましたが、問題は解決しません (目に見えて小さくなりますが)。

ここに画像の説明を入力

ヘルプ/ポインタをいただければ幸いです:)

4

4 に答える 4

3 
.front-page-container::after { clear: both }

.front-page-container * {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

.front-page-container article:nth-child(odd) {
        width:50%;
        float:left;
}
.front-page-container  article:nth-child(even) {
        width:50%;
        float:right;
}

それはそれを行う必要があります。ボックスのサイズ変更により、div の幅は、幅からパディングと境界線を引いたものになります。そのため、宣言された幅にパディングやボーダーが追加されることはありません。（それがそれを説明する最良の方法だと思います）。::after 疑似要素は、コンテナーの後のすべてのフロートをクリアします。

おまけとして、この記事がこの件に関して非常に役立ったことを付け加えておきます。

http://css-tricks.com/dont-overthink-it-grids/

于 2013-10-07T22:09:02.987 に答える
1

投稿したコードは期待どおりに機能します。http://jsfiddle.net/XqDn6/1/を参照してください

この問題は、要素のマージン/パディングarticleによって各要素の幅が 50% を超えている可能性が高く、2 つ続けて収まらないことが原因である可能性があります。

この問題を解決する 1 つの方法box-sizing: border-boxは、値にボーダー/パディングが含まれていることを意味する使用することwidthです。

.front-page-container article{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ボーダー/パディングとデモbox-sizing: http://jsfiddle.net/XqDn6/2/

于 2013-10-07T22:08:00.887 に答える
0

私にとってはうまく機能します：http://codepen.io/skimberk1/pen/6127d1c3a4961de1f9c1ef20d5400d0f。

あなたの場合、何がうまくいかないのかわかりません。他のCSSが影響している可能性がありますか？

CSS を使用するbox-sizing: border-box;と、最大幅 (パディングとボーダーを含む) が定義した幅 (この場合は 50%) になるため、役立つ場合があります。

于 2013-10-07T22:07:02.000 に答える
0

問題は、 CSS の学校clear: bothで読まれているように、

指定された段落の左側または右側にフローティング要素を配置することはできません。

clear の使用方法の例を次に示します: CSS Clear プロパティの理解。

フロートは、コンテナーを拡張するために使用される古いソリューションですが、ここで見られるように: Clearing floats .

解決策: 可能であればそれを削除するか、質問を編集して、なぜそこにあるのかを説明してください (そして削除することはできません)。

于 2013-10-07T22:07:10.870 に答える