相关疑难解决方法(0)

我该如何修改:

<div style="border: solid 1px red; text-align: center">
    <div style="background-color: yellow; float: left">left</div>
    middle
    <div style="float:right; background-color: yellow">right</div>
</div>

所以"右"与"左"垂直排列？

这是我的坏css看起来像渲染:

left                 middle
                                            right

谢谢!

我最近有机会 ......完全重新设计我支持的网站的布局.在保持我的CSS简单,我的HTML语义的兴趣,我决定使用的修改版本的"圣杯"布局(其主要区别在于移动右列中的中心柱,从而进一步简化了里面的东西,并且使中心栏固定宽度).

在可忽略不计的数量之后,我在FF3,Chrome和Opera中使用了新的布局,这意味着是时候启动IE6了.可以预见,布局中断(左栏完全丢失).但是,我没想到它会如此惊人地突破 - 我似乎在IE6中触发了某种渲染错误,我既不能隔离也不能消除它.

在调整圣杯布局时,我最初省略了它使用的IE6特定的hack,因为它对右列的修改不是(不应该？),因为它占了该列的宽度,在我的布局中不会出现在同一级别.仍然,重新添加它是我的第一个猜测,但它结果需要一个非常奇怪的数字(246px,它没有出现在样式表中的任何其他地方),所以我尝试调整窗口大小以确保它不相关到页面大小.令我惊讶的是,该列然后向右跳跃了大约1000个像素,远远超出了页面的边缘.

回过头来删除IE6 hack,调整大小时会出现同样的行为,而不是从布局的左侧跳出页面,它在布局的右侧无处不在.我已经看到布局的每个部分,这看起来甚至是远程相关的,并且搜索了我所知道的所有IE6渲染错误,但似乎无法消除跳转页面调整大小的行为.

有没有人见过这个bug,如果它是bug？完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Modified grail layout</title>

        <style type="text/css">
            * {
                border: 0;
                margin: 0;
                padding: 0;
            }

            #main {
                background: white;
                overflow: auto;
                padding-left: 180px;
            }

            #content {
                background: #dfd;
                float: left;
                padding: 10px 10px 0;
                width: 800px;
            }

            #left {
                background: #ccc;
                float: left;
                margin-left: -100%;
                position: relative;
                padding: 10px 10px 0;
                right: 180px;
                width: 160px; …