Question

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

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

非常感谢任何帮助！

Answer 1

你是说你没有那个网站吗？在我看来，小部件的宽度是31.3％，三个小部件加上它们的边距使它成为100％..

如果您想要更改它，可以通过添加width: 320px !important;

来覆盖css

Answer 2

试试这个

.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>

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

包含div wrapper的最大宽度为960px ..同时它包含的每个小部件的宽度为31％..所以如果你将第一个小部件的宽度更改为320px ..那么其他两个会崩溃..（b / c它们都被设置为float: left）..所以你要做的是将第一个的大小增加到320px，还要调整其他两个的大小这样它们就足够小，可以包含在包装器div中

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

但如果您只是将第一个小部件的宽度更改为320px并将其他两个小部件更改为...您将最终得到（320px + .31（960）+ .31（960））＆gt; 960

希望这会有所帮助

重新调整网站小部件的宽度和宽度高度CSS

3 个答案: