html - 调整网站小部件的宽度和高度 CSS

Question

如何更改添加到页脚底部的每个单独小部件的宽度和高度。 http://jjabaird.virb.com/

例如，我有 3 个小部件，每个小部件设置为 320px，我希望这三个小部件中的一个为 960px，另一个大小不同。

如有任何帮助，我们将不胜感激!

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 的最大宽度为 960px..同时它包含的每个小部件的宽度为 31%..所以如果您将第一个小部件的宽度更改为 320px .. 然后另外两个会撞下来.. (b/c 它们都设置为 float: left).. 所以你想要做的是将第一个的大小增加到 320px，但是还要调整其他两个的大小，使它们足够小以包含在包装器 div 中

即总宽度必须 <= 960px..(并且在计算时还必须考虑小部件的边距和填充)

但是如果你只是将第一个小部件的宽度更改为 320px 而保留另外两个..你最终会得到 (320px + .31(960) + .31(960)) > 960

希望对你有帮助