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

【问题标题】：Re-sizing website widgets width & height CSS重新调整网站小部件的宽度和高度 CSS
【发布时间】：2013-02-13 14:03:57
【问题描述】：

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

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

任何帮助将不胜感激！

【问题讨论】：

你能解释一下当前的问题吗？
@BkSantiago 我不知道如何调整每个小部件的宽度和高度。例如我拥有的标题为“mm”的小部件，我正在寻找调整小部件的宽度。
一个简单的问题您在创纪录的时间内得到了三个答案。请选择一个，这样人们就会有动力花时间回答您未来的问题
大声笑，@abbood，我正在测试哪一个效果最好。我总是对答案投票，但如果你看到了，你就不会在上面发表评论了。
我很抱歉 jbnbtw.. 我想多了.. 这就是为什么我尽可能礼貌地表达我的评论.. 在那种情况下.. 我欠你另一个答案.. 只是这次不觉得有义务投票;)

标签： html css widget

【解决方案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 中

即总宽度必须

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

希望对你有帮助

【讨论】：

谢谢@abbood 完美运行！我很欣赏清晰的解释！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：

感谢帕万的帮助！