html - Web サイト ウィジェットの幅と高さの CSS のサイズ変更

Question

フッターの下部に追加した個々のウィジェットの幅と高さを変更するにはどうすればよいですか。http://jjabaird.virb.com/

たとえば、3 つのウィジェットがあり、各ウィジェットが 320px に設定されているとします。これらの 3 つのウィジェットの 1 つを 960px にし、別のサイズにします。

どんな助けでも大歓迎です！

Answer 1

これを試して

.widgets article.widget {
    float: left;
    margin-bottom: 20px;
    margin-right: 15px;
    width: 310px;
}

3つのウィジェット 310*3=930など。margin-right:15px; 15*2=30930+30= 960

3番目のウィジェットはfloat：rightを提供します。

<article class="widget blank" style="float: right;">
                <h2>Bleh 2</h2>
                <p>testing testing testing</p>

            </article>

Answer 2

あなたのコードで

<div class="wrapper">            
        <article class="widget rss">
        </article>
        <article class="widget blank">
            <h2>Bleh</h2>
            <p>Testing Testing Testing</p>
        </article>
        <article class="widget blank">
            <h2>Bleh 2</h2>
            <p>testing testing testing</p>
        </article>            
    </div>

およびcss：

.wrapper { 
    max-width: 960px; 
    padding: 0; 
    margin: 0 auto;
 }

.widgets article.widget { 
    margin-bottom: 20px;
     width: 31.3%; 
    float: left; 
}

含まれているdivwrapperの最大幅は960pxです。同時に、含まれている各ウィジェットの幅は31％です。したがって、最初のウィジェットの幅を320pxに変更すると、他の2つはぶつかります。 （b / cはすべてに設定されてfloat: leftいます）。したがって、最初のサイズを320pxに増やすだけでなく、ラッパーdiv内に含めるのに十分小さいように他の2つのサイズも調整します。

つまり、幅の合計は960px未満である必要があります（計算を行うときは、ウィジェットのマージンとパディングも考慮する必要があります）。

ただし、最初のウィジェットの幅を320pxに変更し、他の2つを残すと、（320px + .31（960）+ .31（960））>960になります。

お役に立てれば

Answer 3

あなたはそのウェブサイトをやっていないと言っていますか？私が見たところでは、ウィジェットの幅は 31.3% で、3 つのウィジェットとその余白を合わせると 100% になります。

変更したい場合は、css に追加してオーバーライドできます。width: 320px !important;