Question

编辑;见帖子的底部

我的布局在除Internet Explorer 7之外的所有内容中都能正常运行。

我有一个容器div，它有一个宽度和hasLayout（我尝试过缩放和其他各种应该设置的东西，但没有任何变化）。里面是三个浮动元素，一个左边和两个右边。在它们下面是一个clear: both的元素，它实际上正在这样做，但容器以较短的浮点结束，即使我为它设置了一个高度，包括比原来/自然更高的高度。

这就是它的样子：http://tinypic.com/r/ea3vpy/8

它应该看起来完全一样，除了两个元素在内容区域内的布局中不方便。

我尝试使用clear: both添加空div，我尝试过clearfixes，我尝试过浮动容器。我甚至在两个正确的浮动div上添加了一个容器，然后浮动而不是它们，但它并没有改变任何东西。溢出不是一个真正的选择，因为我必须切断内容或在布局中有滚动条。

以下是相关的CSS：

#content {
    width: 669px;
    height: 100%;
    padding: 20px;
    padding-top: 0;
    position: relative;
    display: table-cell;
    vertical-align: top;
    background-color: #F7F8F7;
    text-align: left;
}

#content { /* To make it play nice with the sidebar */
    _width: 709px;
    *display: inline;
    *position: absolute;
    *left: 0;
    *zoom: 1;
}

p#indexwelcome {
    max-width: 330px;
    min-height: 440px;
    float: left;
}

#dogimg {
    width: 323px;
    max-width: 100%;
    height: 246px;
    margin-left: 10px;
        float: right;
}

#loginbox {
    max-width: 323px;
    margin: 20px 0;
    padding: 10px;
    position: relative;
    float: right;
}

#itemsbox { /* the one with the bananas */
    width: 644px;
    height: 142px;
    margin-top: 20px;
    position: relative;
    clear: both;
}

HTML：

<div id="content">
<h1>Heading</h1>

<p id="indexwelcome">Text paragraphs here</p>
<img src="images/dog.jpg" id="dogimg" alt="dog" />

<div id="loginbox">
    <p>Login box stuff</p>
</div> <!-- loginbox div -->

<div id="itemsbox">
    <!-- banana images here -->
</div> <!-- itemsbox div -->
</div> <!-- content div -->

编辑：所以我解决了这个问题，虽然它不太理想。将内容和侧边栏设置为height: auto（而不是height: 100%）会使其展开内容。

然而，即使使用height: auto，该页面容器（绿色空间）仍然无法扩展。我必须设置一个特定的最小高度或高度，这不是很好，因为页面内容是动态的，所以如果其他页面的内容比它设置的内容短，那么其他页面会有额外的空间。 ;如果内容较大，则会出现同样的原始问题。当然，内容和侧边栏的长度仍然不一样（但这是另一个问题）。

这是CSS页面：

#page {
    width: 1025px;
    height: 100%;
    min-height: 650px;
    margin: 15px auto;
    padding: 10px 0;
    position: relative;
    background-color: #7B9F73;
    *min-height: 990px;
}

IE7容器的浮动元素没有扩展，清除和缩放不起作用

0 个答案: