Question

这是我遇到问题的网站：http://bgflirt.com

我需要左边的菜单有一个固定的宽度，当调整浏览器窗口大小时（宽度为百分比），带有用户图片的部分应该调整大小。但是，正如您所看到的 - 内容拒绝在菜单右侧对齐的部分，而是显示在其下方。有人可以帮我这个吗？

Answer 1

#content_wrap删除width:100%和float:left。这将使盒子伸展以填充所有可用的水平空间您还需要以您喜欢的任何方式清除浮子。例如，将overflow: hidden;添加到#content_wrap。

这对我来说是萤火虫。

BTW，因为你使用固定宽度的图形作为页眉和页脚（带有那些漂亮的圆角的框架），你无法真正拉伸它们。

Answer 2

尝试在CSS中使用类似的内容：

.container {
    position: relative;
}

.sidebar_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
}

.content_wrap {
    margin-left: 130px;
}

我相信这比浮动更容易使用。

Answer 3

有几件事。

首先，摆脱xhtml doctype，然后开始使用html 4.01 strict doctype。 xhtml除了处于出路之外，还在许多浏览器中呈现不一致的呈现。

其次，使用表格更容易实现。只需将表格的宽度设置为100％，将第一列的宽度设置为130px。布局引擎将负责确定另一方的大小。顺便说一句，这将解决你将遇到的一些其他问题，例如使双方都有相同的高度。

Answer 4

你的#content_wrap div有100％的宽度，就像这样，当有一个宽度为130px的菜单时，它不可能向左浮动......

如果您真的想让网站重新调整大小，您应该以％为单位设置菜单的宽度...类似

#sidebar_wrap{
width: 15%;
float: left;
}

#content_wrap{
width: 85%;
float: left;
}

请注意，宽度的总和不能大于100％，您应该考虑填充和边框。

DIV对齐问题

4 个答案: