-1

每当我为我的网页输入 HTML 时；它#content div位于小部件/侧边栏下方，我已经尝试过position:absolute- 这会导致我的图像无法重新调整大小。

#content {
    background: #fff;
    margin: 2px 0 2px;
    padding: 20px 62px;
    width: 68%;
    display: block;
    float: left;
    margin-left: 25%;
    /* rounded corner */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -moz-box-shadow: 0px 0px 0px 0px #000000;
    -webkit-box-shadow: 0px 0px 0px 0px #000000;
    box-shadow: 0px 0px 0px 0px #000000;
}

/************************************************************************************
SIDEBAR
*************************************************************************************/
#sidebar {
    width: 25%;
    float: left;
    margin: 2px 0 2px;
}
.widget {
    background: #0b2d7e;
    margin: 0 0 0px;
    padding: 0px 20px;
    /* rounded corner */
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    /* box shadow */
    -moz-box-shadow: 0px 0px 0px 0px #000000;
    -webkit-box-shadow: 0px 0px 0px 0px #000000;
    box-shadow: 0px 0px 0px 0px #000000;
}
4

3 回答 3

1

我之前试图教给你的同样的教训。由于填充物，您的东西加起来不会达到 100%。你有 68% + 25% + 25% + 更多的填充 = 远远超过 100%。

如果一个盒子是 50% 宽，它的左右边距为 10px，边框为 1px，那么你就有 50% +20px+2px。

如果您有两个与上面完全相同的 div，则您有 100% +40px +40px +2px +2px = 超过 100%。

用于box-sizing: border-box;解决上面的填充和边框问题。然后你只需要考虑利润。

请参阅我可以使用它来确定盒子大小。

这是一个 JS Fiddle 修复你的代码......你也有一个</aside>不需要的流浪者。

http://jsfiddle.net/a2YSa/1/

请注意，在我提供的代码中，box-sizing: border-box;告诉 div 计算其宽度，包括填充和边框。然后我有 25% 大小的左列和一个 50% 右内容列，边距为 25% = 100%。

这是一个带有 25% 侧边栏和 75% 主边距的小提琴，边距为 0。

http://jsfiddle.net/a2YSa/3/

我最后一把小提琴的截图：

在此处输入图像描述

于 2013-03-26T16:47:16.333 回答
0

我认为问题出在这里：

content width: 68%
content margin-left: 25%
sidebar width: 25%

您目前使用超过 100%。如果这不是问题，请也发布 html 代码或使用 Firebug 检查宽度和填充/边距。这是最简单的方法。

于 2013-03-26T16:42:36.003 回答
0

您是否尝试过使用 firebug 来可视化问题？我认为您应该删除#content 上 25% 的左边距...

于 2013-03-26T16:37:32.200 回答