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

Question

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

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

任何帮助将不胜感激！

Answer 1

你是说你没有做那个网站？在我看到的情况下，小部件的宽度为 31.3%，三个小部件加上它们的边距使其达到 100%。

如果你想改变它，你可以通过添加在css中覆盖它width: 320px !important;

Answer 2

试试这个

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

三个小 部件310*3=930等等。margin-right:15px; 15*2=30930+30= 960

第三个小部件给出 float:right;

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

            </article>

Answer 3

在你的代码中

<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 .. 那么另外两个将向下碰撞.. （b / c它们都设置为float: left）..所以你想要做的是将第一个的大小增加到320px，但还要调整其他两个的大小，使它们足够小以包含在包装器div中

即宽度的总和必须 <= 960px .. （在进行计算时，您还必须考虑小部件的边距和填充）

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

希望这可以帮助