重新調整網站窗口小部件的寬度和高度CSS

Question

如何更改我添加到頁腳底部的每個窗口小部件的寬度和高度。 http://jjabaird.virb.com/

例如，我有3個小部件，每個小部件都設置爲320px，我希望這三個小部件中的一個爲960像素，另一個大小不同。

任何幫助將不勝感激！

Answer 1

在你的代碼

<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; 
} 

包含div wrapper具有960像素..在同一時間最大寬度每個插件它包含有一個寬度的31％..所以如果你改變第一個部件的寬度爲320px ..那麼其他兩個會撞到..（B/C他們都設置爲float: left）..所以你想要做的是增加SIZ e的第一個到320px，但也調整其他兩個的大小，使他們足夠小，以包含在包裝div

即寬度總和必須是< = 960px ..（你必須當你進行計算時，也要考慮到控件的邊距和填充）

但是，如果你只是將第一個小部件的寬度更改爲320px而將其他兩個更改爲0，則最終將以 （320px +。 31（960）+ .31（960））> 960

希望對您有所幫助

Answer 2

你是說你沒有做那個網站？在我看到的，小部件的寬度是31.3％，和三個小部件此外，它們的利潤率，使其

，如果你想改變它，你可以在CSS覆蓋加入width: 320px !important;

Answer 3

100％..它

試試這個

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

三種構件310*3=930和margin-right:15px;15*2=30如此930+30= 960。

和第三個小工具給float：right;

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

      </article>