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

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

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

任何幫助將不勝感激！

來源

2013-02-13 Slurms

您能否解釋一下當前問題LEM？ – 2013-02-13 05:46:17

@BkSantiago我無法弄清楚如何調整每個部件的寬度和高度。例如標題爲「mm」的小部件，我正在調整小部件的寬度。 – Slurms 2013-02-13 05:49:01

對於一個簡單的問題，你有三個答案在記錄時間..請選擇一個，讓人們感到有動力花時間回答你的未來問題 – abbood 2013-02-13 07:03:27

在你的代碼

<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

希望對您有所幫助

來源

2013-02-13 06:03:57 abbood

謝謝@abbood完美的作品！我讚賞清楚的解釋！ – Slurms 2013-02-13 07:16:05

永遠快樂:) – abbood 2013-02-13 07:21:11

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

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

來源

2013-02-13 05:55:59

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>

來源

2013-02-13 06:02:04

謝謝你Pawan爲你提供幫助！ – Slurms 2013-02-13 07:16:22

這是我的榮幸 – 2013-02-13 07:17:50

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

回答

相關問題